【发布时间】：2019-06-27 18:46:11
【问题描述】：
我正在制作一个小型 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">×</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 core 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[]));
}
}
【问题讨论】：
标签： c# angular typescript asp.net-core angular7