如何在不刷新页面的情况下更改Mat-Label的内容

Question

我有一个垫标签，显示客户结束日期。我最初对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>

打字稿代码：

 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获取结束日期，然后当我点击Delete API时，API将为我提供一个我必须显示的当前日期。

一切正常，但是我面临的唯一问题是删除显示日期后不会更改，我必须刷新页面并再次从后端获取数据以查看更改。如何显示新日期而不刷新页面。

Answer 1

如果数据包含您的联系人所需的所有数据，并且这取决于变量的结构以及订阅返回的内容，这应该会更新您的数据并刷新您的视图。

 deleteContact(contactId) {
const deleteCustomerId = this.customerId;
const deleteContactId = contactId;
this.customer360Service.deleteIndCustContact(deleteCustomerId, deleteContactId).subscribe(
  data => {
    console.log(data);
    this.sampleData1.contact = data; // add this
    this.snackbar.open('Contact Deleted Successfully', 'Close', {
      duration: 3000
    });
  },
  err => {
    this.snackbar.open('Failed To Delete Contact', 'Close', {
      duration: 3000
    });
  }
);