You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MDB Popover无法显示ng-template内容仅输出模板名称字符串

问题原因

代码中使用mdbPopover="popTemplate"的静态属性赋值写法时,Angular会将双引号包裹的popTemplate识别为普通字符串,不会关联到页面中通过#popTemplate定义的ng-template模板引用,因此弹窗不会渲染自定义HTML内容,仅直接展示字符串文本。
问题表现如下图:
Popover渲染异常效果

解决方法

将静态属性赋值改为Angular动态属性绑定语法,给mdbPopover属性添加方括号,直接传入模板引用变量,无需给变量加引号。
修正后的代码:

<a role="button">
        <ng-template #popTemplate>
            <div class="md-form">
                <textarea type="text" id="form7"
                    class="md-textarea md-textarea-auto form-control" mdbInput
                    style="padding-top: 0;">
                </textarea>
                <label for="form7">Kommentar</label>
            </div>
        </ng-template>
        <i [mdbPopover]="popTemplate"
            placement="right" mdbPopoverHeader="Dismissible popover" triggers="focus"
            class="far fa-comment fa-sm">
        </i>
    </a>

注意:若修改后仍存在组件不生效的情况,请确认项目中已正确导入MDB Popover对应的依赖模块。

内容的提问来源于stack exchange,提问作者BennoDual

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 00:01:05