从函数返回 html 的 ngbPopover

Question

我有一个 ngbPopover 调用 return 我想填充它的 html。我已经从文档（单击 here）中了解到我需要使用模板，如果我将 html 放入其中就可以了，但我想要一个函数来 return 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 作为字符串获取。

Answer 1

您可以在模板中的 <div> 中使用 innerHTML，如所示。像这样修改您的 <ng-template>：

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

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

祝你好运！

从函数返回 html 的 ngbPopover

ngbPopover with html returned from a function

angular-bootstrap

angular