1

我正在尝试制作一张桌子，它将显示城市中的场地。我正在使用 *ngFor 循环来显示场地（表格行）。单击表格行后，应出现包含更多信息的模式窗口。我正在使用 ng-bootstrap 并从 json 加载有关场地的信息。

我的问题是 - 为每个场地（表格行）创建模式窗口的最佳方式（以及如何实施）是什么。我试图将 modalWindow 放在 ng-container 中并为其分配唯一 ID，但没有成功，因为我只能将 TemplateRef 或 Component 传递给 ng-bootstrap 函数 .open()。

所以除了上面的解决方案，我知道如何做到这一点。我认为最好的方法是创建模态窗口的模板（以避免创建几乎相同的模态窗口 100 倍），然后动态地将值（名称、描述等）传递给它，即用户点击。但我真的不知道如何实现这一点。

现在我有这段代码，它正在生成表格行：

<ng-container *ngFor="let venue of venues">
  <tr>
    <td>{{ venue.title }}</td>
    <td>{{ venue.location.city | titlecase }}</td>
    <td>{{ venue.location.zipcode }}</td>
    <td>{{ venue.location.adress }}</td>
    <td>{{ venue.dates.startdate }}</td>
    <td><button class="btn btn-outline-dark" (click)="modalService.open();">Details</button></td>
  </tr>
</ng-container>

以及我想要显示的这个示例模式窗口。请注意，模态窗口内的值应该会有所不同，具体取决于单击的地点。示例模式窗口的代码：

  <div class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ venue.title }}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>{{venue.description}}</p>
        </div>
      </div>
    </div>
  </div>

您能否帮助我，如何以正确的方式为每个场地制作模态窗口？谢谢！:)

4

1 回答 1

0

正如您所说，您需要为模态创建一个组件，它将接收一个场所（您可以传递一个 id 并从模态中获取它，或者您可以简单地传递完整的场所对象）。

在显示场地的组件内，创建一个获取场地的函数，该函数将在单击行按钮时调用

<td><button class="btn btn-outline-dark" (click)="openVenueModal(venue);">Details</button></td>

然后在您的组件内创建上述函数：

function openVenueModal(venue: Venue) {
  this.bsModalService.show(modalComponent, {
    {
      venue: venue
    }
  });
}

modalComponent 是 modal 组件 html 文件的引用。

然后您的模态组件将在您显示时显示它。它将有一个场地属性，由 modalService 填充。

请参阅 ng-bootstrap 文档以关闭模式！

希望能帮助到你

于 2020-04-01T14:49:37.713 回答