如何在 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">

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

    </tr>

  </tbody>

</table>

place your modal to bottom

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

            <div class="modal-body">

              <div class="container">

                <p class="details">

                  <span class="detail-label">First Name:</span>

                  {{ currentContactInfo .FirstName }}

                </p>

                <p class="details">

                  <span class="detail-label">Last Name:</span> {{ currentContactInfo .LastName }}

                </p>

                <p class="details">

                  <span class="detail-label">Address:</span> {{ currentContactInfo .Address }}

                </p>

                <p class="details">

                  <span class="detail-label">Phone Number:</span>

                  {{ currentContactInfo.PhoneNumber }}

                </p>

              </div>

            </div>

            <div class="modal-footer">

              <button

                type="button"

                class="btn btn-primary btn-lg"

                data-dismiss="modal"

              >

                Close

              </button>

            </div>

          </div>

        </div>

      </div> 

Finaly in your .ts do this

 ``

//declare a variable that contain the current contact info

currentContactInfo: any = {};

contactInfo(id){

  this.service.getContactDetail(id).subscribe(res => {

     this.currentContactInfo = res;

 });

} 

``

Answer 2

您是否考虑过为详细信息模态创建一个单独的组件？

表中的每一行都调用一个调用对话框的函数。你可以在 ngFor 中传递你的项目。