angular - ngbPopover 与从函数返回的 html

Question

我有ngbPopover一个调用来返回我想要填充它的html。我从文档（单击此处）中读到我需要使用模板，如果我将 html 放入其中，那很好，但我想要一个函数来返回 html，但这只是作为字符串出现。

<ng-template #popContent>{{getConnBreakdown(opp)}}</ng-template>
<button type="button" class="btn btn-outline-secondary mr-2" placement="top" [ngbPopover]="popContent" popoverTitle="Connection Types">{{ getTotalConnections(opp) }}</button>

函数看起来像：

getConnBreakdown(opp: IOpportunity){
  let returntable = '<table><tbody>';
  this.connectonTypes.map(t => 
    returntable +=  '<tr><td>' + t.name + '<td><td>' + opp.products.filter(p => p.connectionTypeId === t.id).reduce((a, b) => { return a + b.quantity; }, 0) + '</td></tr>'
  );
  returntable += '</tbody></table>';
  return returntable;
}

我试过绑定到innerHTML

<ng-template #popContent ng-bind-html="getConnBreakdown(opp)"></ng-template>

但我总是将 html 作为字符串获取。

标签： angularangular-bootstrap

Answer 1

您可以在位于模板中的innerHTMLa中使用，如本答案所示。像这样修改你的：<div><ng-template>

<ng-template #popContent>
    <div [innerHTML]="getConnBreakdown(opp)"></div>
</ng-template>

这是我修改并得到了这个结果的正在运行的 stackblitz （我还调整了位置以正确显示此示例）：

祝你好运！