我有一个显示客户结束日期的垫子标签。 当我向 API 发出 GET 请求时,我最初得到结束日期。 假设结束日期是 16-05-2099。我按原样显示结束日期。 现在我有一个执行软删除的删除按钮。这意味着它不会删除详细信息,它只会将结束日期更改为当前日期,即今天的日期。
最初我这样显示我的详细信息:
<div *ngIf="showContact; else editableContact">
<div *ngFor="let element of sampleData1.contact">
<div *ngIf="contact.toString() === element.contactType" [attr.data-status]="element.contactStatus">
<br />
<mat-label hidden>Contact Id: {{ element.contactId }}</mat-label>
<mat-label>Contact Sub Type: {{ element.contactSubType }}</mat-label>
<br />
<mat-label>Contact Reference Type:{{ element.referenceNumber }} </mat-label>
<br />
<mat-label>Agreement Id : [</mat-label>
<mat-label *ngFor="let agreementIds of element.agreementId"> {{ agreementIds + ' ' }} </mat-label>
<mat-label>]</mat-label>
<br />
<mat-label>Contact Last Verified Date: {{ element.lastVerifiedDate | date: 'dd/MM/yyyy' }}</mat-label>
<br />
<mat-label>Contact End Date:{{ element.endDate | date: 'dd/MM/yyyy' }}</mat-label>
</div>
</div>
</div>
typescript 代码:
deleteContact(contactId) {
const deleteCustomerId = this.customerId;
const deleteContactId = contactId;
this.customer360Service.deleteIndCustContact(deleteCustomerId, deleteContactId).subscribe(
data => {
console.log(data);
this.snackbar.open('Contact Deleted Successfully', 'Close', {
duration: 3000
});
},
err => {
this.snackbar.open('Failed To Delete Contact', 'Close', {
duration: 3000
});
}
);
删除按钮 HTML:
<button
style="float: right"
[hidden]="showContactDeleteButton"
mat-button
color="black"
matTooltip="Delete"
class="view-data"
(click)="deleteContact(element.contactId)"
>
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
问题是我不需要在 HTML 中编写任何代码。我从后端获取数据,我只需要显示它。我不必在 Typescript 或任何地方编写任何逻辑。最初我会从 API 获取结束日期,然后当我点击删除 API 时,API 会给我一个当前日期,我只需要显示它即可。
一切正常,但我面临的唯一问题是删除后显示日期没有改变。我必须刷新页面并再次从后端获取数据以查看更改。如何在不刷新页面的情况下显示新日期。
最佳答案
当您的删除函数成功完成对 API 的请求时,您需要更新数组中的对象。现在要更新对象,您需要一些唯一的属性来标识数组中的对象。为此,您可以使用对象索引
现在假设您的数组名称是 dates
,您在循环中使用它
<div *ngFor="let element of sampleData1.contact; let i = index">
<mat-label>Contact End Date:{{ element.endDate | date: 'dd/MM/yyyy' }}</mat-label>
<button (click)="deleteAddress(element.addressId, i)" </button> //i will be the index of element inside array
</div>
然后在你的删除函数中
deleteAddress(addressId, index) {
const deleteCustomerId = this.customerId;
const deleteAddressId = addressId;
this.customer360Service.deleteIndCustAdd(deleteCustomerId, deleteAddressId).subscribe(
data => {
console.log(data);
// here you can delete the whole object or update it
this.sampleData1.contact[index].endDate = "You new Date" // <- this will his the object and auto updates the view without reloading
this.snackbar.open('Address Deleted Successfully', 'Close', {
duration: 3000
});
},
err => {
this.snackbar.open('Failed To Delete Address', 'Close', {
duration: 3000
});
}
);
}
关于javascript - 如何在不刷新页面的情况下更改 Mat-Label 的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56162018/