如何在 Angular 7 中将数据从组件传递到 ngBootstrap 模式？

Question

我有一个使用 ngFor 显示数据的表格。我需要在单击时以模态显示单个行数据。我可以通过将行作为 click 参数传递来将其记录在控制台中，但无法将其传递到模态中。

假设正在从服务中获取表数据，并且模态是与表位于同一组件文件中的模板引用。

这是创建的小提琴 https://stackblitz.com/edit/angular-xr8ud5

我使用了 angular 1.x 并且数据是通过解析传递的。我是 Angular 的新手，从未在 ngBootstrap 中工作过。

任何帮助表示赞赏。谢谢

Answer 1

可以通过 Angular 的2-way binding将数据从组件传递到 ngBoostrap 模态。这实际上与您在 Angular 1.x 上执行 2 向绑定的方式完全相同！

我为你做了一个演示。

首先，在 model-basic.ts 上，为模态定义模型。然后，modalContent使用表行数据分配模型属性。

modalContent:undefined
  .
  .

open(content, tableRow) {
  this.modalContent = tableRow
  this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'});
}

在您的 modal-basic.html 上，您可以使用 {{ ... }}模板表达式在您的模态本身上显示模型的各个属性。

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Details</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    id: {{ modalContent.id }}
    <br>
    first: {{ modalContent.first }}
    <br>
    last: {{ modalContent.last }}
    <br>
    handle: {{ modalContent.handle }}
  </div>
</ng-template>