我正在制作一個小型 CRUD 地址簿應(yīng)用程序。我已經(jīng)處理了創(chuàng)建、更新和刪除。我創(chuàng)建的聯(lián)系人顯示在一個表格中，并具有用于查看、編輯和刪除單個聯(lián)系人的圖標(biāo)。查看圖標(biāo)應(yīng)打開一個模式并顯示該特定聯(lián)系人的詳細(xì)信息。如果我將模式直接放在循環(huán)遍歷所有聯(lián)系人的表格中，它總是只顯示第一個聯(lián)系人。這是表格：<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">×</span> </button> </div>
2 回答
LEATH
TA貢獻(xiàn)1936條經(jīng)驗 獲得超7個贊
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">×</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;
});
}
``
楊魅力
TA貢獻(xiàn)1811條經(jīng)驗 獲得超6個贊
您是否考慮過為詳細(xì)信息模態(tài)創(chuàng)建一個單獨(dú)的組件？
表中的每一行都調(diào)用一個調(diào)用對話框的函數(shù)。你可以在 ngFor 中傳遞你的項目。
- 2 回答
- 0 關(guān)注
- 164 瀏覽
添加回答
舉報
0/150
提交
取消