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

Question

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

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

这是创建的 fiddle https://stackblitz.com/edit/angular-xr8ud5

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

感谢任何帮助。谢谢

Answer 1

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

我做了一个demo为你。

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

modalContent:undefined
  .
  .

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

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

<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>