如何在不刷新页面的情况下更改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 />

打字稿代码：

 deleteContact(contactId) {

const deleteCustomerId = this.customerId;

const deleteContactId = contactId;

  data => {

    console.log(data);

    this.snackbar.open('Contact Deleted Successfully', '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会给我一个我必须显示的当前日期。

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