如何在 Angular 7 的模态中显示单列的详细信息？

Question

我正在制作一个小型 CRUD 地址簿应用程序。我已经处理了创建、更新和删除。我创建的联系人显示在一个表格中，并具有用于查看、编辑和删除单个联系人的图标。

查看图标应打开一个模式并显示该特定联系人的详细信息。

如果我将模式直接放在循环遍历所有联系人的表格中，它总是只显示第一个联系人。

这是表格：

<table class="table table-hover table-striped tborder">

  <thead>

    <tr>

      <th scope="col">#</th>

      <th>First Name</th>

      <th>Last Name</th>

      <th>Address</th>

      <th></th>

      <th></th>

      <th></th>

      <!-- <th>Ph. Number</th>  -->

    </tr>

  </thead>

  <tbody>

    <tr *ngFor="let cd of service.list; index as i">

      <th scope="row">{{ i + 1 }}</th>

      <td>{{ cd.FirstName }}</td>

      <td>{{ cd.LastName }}</td>

      <td>{{ cd.Address }}</td>

      <!-- <td>{{ cd.PhoneNumber }}</td> -->

      <td

        (click)="contactInfo(cd.CTId)"

        class="tfunction"

        data-toggle="modal"

        data-target="#infoModal"

      >

        <i class="far fa-eye fa-lg"></i>

      </td>

      <td class="tfunction" (click)="populateForm(cd)">

        <i class="far fa-edit fa-lg text-info"></i>

      </td>

      <td class="tfunction" (click)="onDelete(cd.CTId)">

        <i class="far fa-trash-alt fa-lg text-danger"></i>

      </td>

      <div

        class="modal fade"

        id="infoModal"

        tabindex="-1"

        role="dialog"

        aria-labelledby="infoModalLabel"

        aria-hidden="true"

      >

        <div class="modal-dialog" role="document">

          <div class="modal-content">

            <div class="modal-header">

              <h5 class="modal-title" id="infoModalLabel">

                Contact Details

              </h5>

              <button

                type="button"

                class="close"

                data-dismiss="modal"

                aria-label="Close"

              >

                <span aria-hidden="true">&times;</span>

              </button>

            </div>

Answer 1

Update your code like this<table class="table table-hover table-striped tborder">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="col">#</th>&nbsp; &nbsp; &nbsp; <th>First Name</th>&nbsp; &nbsp; &nbsp; <th>Last Name</th>&nbsp; &nbsp; &nbsp; <th>Address</th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <th></th>&nbsp; &nbsp; &nbsp; <!-- <th>Ph. Number</th>&nbsp; -->&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr *ngFor="let cd of service.list; index as i">&nbsp; &nbsp; &nbsp; <th scope="row">{{ i + 1 }}</th>&nbsp; &nbsp; &nbsp; <td>{{ cd.FirstName }}</td>&nbsp; &nbsp; &nbsp; <td>{{ cd.LastName }}</td>&nbsp; &nbsp; &nbsp; <td>{{ cd.Address }}</td>&nbsp; &nbsp; &nbsp; <!-- <td>{{ cd.PhoneNumber }}</td> -->&nbsp; &nbsp; &nbsp; <td&nbsp; &nbsp; &nbsp; &nbsp; (click)="contactInfo(cd.CTId)"&nbsp; &nbsp; &nbsp; &nbsp; class="tfunction"&nbsp; &nbsp; &nbsp; &nbsp; data-toggle="modal"&nbsp; &nbsp; &nbsp; &nbsp; data-target="#infoModal"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <i class="far fa-eye fa-lg"></i>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="tfunction" (click)="populateForm(cd)">&nbsp; &nbsp; &nbsp; &nbsp; <i class="far fa-edit fa-lg text-info"></i>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td class="tfunction" (click)="onDelete(cd.CTId)">&nbsp; &nbsp; &nbsp; &nbsp; <i class="far fa-trash-alt fa-lg text-danger"></i>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>place your modal to bottom<div&nbsp; &nbsp; &nbsp; &nbsp; class="modal fade"&nbsp; &nbsp; &nbsp; &nbsp; id="infoModal"&nbsp; &nbsp; &nbsp; &nbsp; tabindex="-1"&nbsp; &nbsp; &nbsp; &nbsp; role="dialog"&nbsp; &nbsp; &nbsp; &nbsp; aria-labelledby="infoModalLabel"&nbsp; &nbsp; &nbsp; &nbsp; aria-hidden="true"&nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title" id="infoModalLabel">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Contact Details&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="close"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-dismiss="modal"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; aria-label="Close"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span aria-hidden="true">&times;</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="detail-label">First Name:</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ currentContactInfo .FirstName }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="detail-label">Last Name:</span> {{ currentContactInfo .LastName }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="detail-label">Address:</span> {{ currentContactInfo .Address }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="details">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="detail-label">Phone Number:</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ currentContactInfo.PhoneNumber }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-footer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="button"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="btn btn-primary btn-lg"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data-dismiss="modal"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Close&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp;Finaly in your .ts do this&nbsp;``//declare a variable that contain the current contact infocurrentContactInfo: any = {};contactInfo(id){&nbsp; this.service.getContactDetail(id).subscribe(res => {&nbsp; &nbsp; &nbsp;this.currentContactInfo = res;&nbsp;});}&nbsp;``

Answer 2

您是否考虑过为详细信息模态创建一个单独的组件？表中的每一行都调用一个调用对话框的函数。你可以在 ngFor 中传递你的项目。