如何在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>
            <div class="modal-body">
              <div class="container">
                <p class="details">
                  <span class="detail-label">First Name:</span>
                  {{ cd.FirstName }}
                </p>
                <p class="details">
                  <span class="detail-label">Last Name:</span> {{ cd.LastName }}
                </p>
                <p class="details">
                  <span class="detail-label">Address:</span> {{ cd.Address }}
                </p>
                <p class="details">
                  <span class="detail-label">Phone Number:</span>
                  {{ cd.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>
    </tr>
  </tbody>
</table>

這是組件：

import { ContactDetailService } from "./../../shared/contact-detail.service";
import { Component, OnInit } from "@angular/core";
import { ContactDetail } from "src/app/shared/contact-detail.model";
import { ToastrService } from "ngx-toastr";
import { ContactDetailComponent } from "../contact-detail/contact-detail.component";
import { ContactDetailsComponent } from "../contact-details.component";

@Component({
  selector: "app-contact-detail-list",
  templateUrl: "./contact-detail-list.component.html",
  styles: []
})
export class ContactDetailListComponent implements OnInit {
  constructor(
    private service: ContactDetailService,
    private toastr: ToastrService
  ) {}

  ngOnInit() {
    this.service.refreshList();
  }

  contactInfo(id) {
    this.service.getContactDetail(id);
  }

  populateForm(cd: ContactDetail) {
    this.service.formData = Object.assign({}, cd);
  }

  onDelete(CTId) {
    if (confirm("Confirm Delete")) {
      this.service.deleteContactDetail(CTId).subscribe(
        res => {
          this.service.refreshList();
          this.toastr.warning("Deleted Successfully", "Contact Details");
        },
        err => {
          console.log(err);
          this.toastr.error("Failed to Delete");
        }
      );
    }
  }
}

這是連接到asp.net核心Web api的服務：

import { Injectable } from "@angular/core";
import { ContactDetail } from "./contact-detail.model";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class ContactDetailService {
  formData: ContactDetail;
  readonly rootURL = "http://localhost:60809/api";
  list: ContactDetail[];

  constructor(private http: HttpClient) {}

  // single contact
  getContactDetail(id) {
    return this.http.get(this.rootURL + "/ContactDetail/" + id);
  }

  // submit new contact
  postContactDetail() {
    return this.http.post(this.rootURL + "/ContactDetail", this.formData);
  }

  // update contact
  putContactDetail() {
    return this.http.put(
      this.rootURL + "/ContactDetail/" + this.formData.CTId,
      this.formData
    );
  }

  // delete contact
  deleteContactDetail(id) {
    return this.http.delete(this.rootURL + "/ContactDetail/" + id);
  }

  // contact list
  refreshList() {
    this.http
      .get(this.rootURL + "/ContactDetail")
      .toPromise()
      .then(res => (this.list = res as ContactDetail[]));
  }
}

Answer 1

您是否考慮過為Details模式創建一個單獨的組件？ 不知道您是否熟悉角形材料，但這是一個很好的例子：

https://material.angular.io/components/dialog/examples

表中的每一行都調用一個函數，該函數調用對話框。 您可以在ngFor中傳遞您的項目。

Answer 2

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;
 });
} 

``