使用Angular 4在bootstrap模态窗口中显示特定数据

Question

我们如何通过在Angular4中使用ngFor循环来在bootstrap模态窗口中仅显示特定数据

Answer 1

您可以尝试将数组传递给ng-template，例如：

arrayVar = [
  "first value",
  "sencond value",
  "third value"
]

你可以像这样使用ngFor：

<button type="button" class="btn btn-primary" (click)="openModal(template)">Open modal</button>

<ng-template #template class="myClass" myArray="arrayVar">
  <div class="modal-header">
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <div *ngFor="let hero of arrayVar">
        <td>{{hero}}</td>
    </div>
  </div>
</ng-template>

使用ngx-bootstrap modals演示：

https://stackblitz.com/edit/ngx-bootstrap-fqyt7u?file=app/app.component.html

在这个例子中，你可以在模态中放入你想要的任何东西，只需传递你想要的数据。