ng-bootstrap，带有动态 html 内容的弹出窗口

Question

我正在尝试显示包含 html 内容的弹出窗口。我正在使用 ng-bootstrap 但我很难做到这一点。

html代码

<button type="button" class="btn btn-lg btn-danger" ngbPopover="{{getPopoverData(component.additional)}}" triggers="mouseenter:mouseleave" popoverTitle="Información Adicional">
                                    Hover over me!</button>

打字稿

getPopoverData( data ) :HTMLElement {
    let list = "";
    data.forEach(el => {
      list += `<li><strong>${el.name}:</strong> ${el.value}</li>`;
    });
    var element = document.createElement("ul");
    element.innerHTML = list;
    return  element;
  }

但是，结果是这样的：

不知道怎么回事

Answer 1

AFAIK，并不是要那样使用它。 ngbPopover 的签名只接受 string 或 templateRef。我从 ngbPopover 创建了一个快速示例片段并模拟了您尝试实现的目标。看看这里：https://stackblitz.com/edit/angular-qolg5d

ng-bootstrap，带有动态 html 内容的弹出窗口

ng-bootstrap, popover with dynamic html content

angular

typescript

popover

ng-bootstrap