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

Question

我有一个展示"客户结束日期"的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将给我一个当前日期，我只需显示它。

一切都运行良好，但唯一的问题是，在删除后显示的日期没有更改。我必须刷新页面并再次从后端获取数据才能看到更改。如何在不刷新页面的情况下显示新日期。

- Cpt Kitkat

---

你能发布删除日期的代码吗？ - Vikhyath Maiya

我已经更新了我的问题，请看一下。 - Cpt Kitkat

你是如何获取HTML元素的？它是在循环内还是组件变量中？ - asimhashmi

@AsimHashmi 我向API发送了一个GET请求，它给我返回了结束日期。在HTML中，我使用了一个循环，并显示了element.startDate、element.endDate、element.address等内容。 - Cpt Kitkat

Answer 1

当您的删除功能成功完成对API的请求时，您需要更新数组中的对象。现在要更新对象，您需要一些唯一的属性来标识数组中的对象。为此，您可以使用对象的索引。

现在假设您正在循环中使用的数组名称是dates

最初的回答：

在您的删除功能成功完成对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
    });
  }
);
}

- asimhashmi

---

我不需要对数据进行拼接。我只是进行软删除。结束日期将从一个未来时间更改为当前日期。就这样。对象仍将存在。比如最初的结束日期是2020年5月16日，然后点击删除后它将更改为当前日期。 - Cpt Kitkat

我已经更新了我的答案，请看一下 :) 你可以更新特定索引处的对象。 - asimhashmi

Answer 2

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

 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
    });
  }
);

- jonimv

---

因此，在您的HTML模板中迭代变量sampleData1.contact。根据sampleData1和sampleData1.contact的结构类型，我想后者是一个数组，您可以尝试在console.log(data);行下添加this.sampleData1.contact = data;。 - jonimv