我有一个展示"客户结束日期"的mat-label标签。 当我进行GET请求从API获取结束日期时,会将其最初显示出来。 假设结束日期是2099年5月16日,我将直接展示该日期。 现在,我有一个删除按钮,点击后会进行软删除。这意味着它不会删除详情信息,而只会将结束日期更改为当前日期,即今天的日期。
最初我像这样展示我的详情信息:
<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将给我一个当前日期,我只需显示它。
一切都运行良好,但唯一的问题是,在删除后显示的日期没有更改。我必须刷新页面并再次从后端获取数据才能看到更改。如何在不刷新页面的情况下显示新日期。
element.startDate
、element.endDate
、element.address
等内容。 - Cpt Kitkat