使用 Angular4 在引导模式窗口中显示特定数据

【问题标题】：display particular data in bootstrap modal window using Angular4使用 Angular4 在引导模式窗口中显示特定数据
【发布时间】：2017-12-31 15:36:58
【问题描述】：

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

【问题讨论】：

查看ng-bootstrap.github.io/#/components/modal/examples上的“组件即内容”演示。
当我们只显示一个模型窗口时很好，但我想显示单独的模式窗口，这些窗口具有特定的文本，这些文本从 json 中检索每个数据，这一切都发生在我们点击 div 时
所以，传递一个参数给 open() 方法，并将这个参数传递给模态框显示的组件，就像在示例中传递 name = 'World' 一样。 plnkr.co/edit/ps7klFdgg8vqTCuOknMK?p=preview
使用@Input 共享数据工作正常，但是当我尝试使用模式时，我收到此错误错误错误：NgbActiveModal 没有提供程序！我已经包括了你能帮我解决这个问题的所有内容
您没有包含任何内容。您的问题是单次发送，没有任何代码行。

标签： angular bootstrapping modal-window

【解决方案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

通过这个示例，您可以将任何您想要的内容放入模式中，只需传递您想要的数据。

【讨论】：