如何在 Angular5 中更新 Html 组件上的列表

Question

我有一个名为 "Alarms" 的组件，我在其中调用 this.getNotifications(); 函数来获取所有通知并将这些通知绑定为模板上的列表。有一个选项可以清除每个警报。我正在调用 clearGatewayError() 函数来更新警报，因此应该在更新警报后更新列表。但是列表没有在模板上更新。

这是我的alarms.Component.ts

getNotifications() {
this.appService.fetchAllErrors().then((resp: any) => {
  if (resp.success) {
    this.notifications = resp.data;
    console.log(this.notifications)
    this.notifications.gatewayErrors.map(item => {
      if (item.type == 'error') {
        let tempGateway = this.getGatewayDetails(item.gatewaycode);
        item.getewayName = tempGateway.name;
        item.time = moment(item.time).fromNow();
        this.errors.push(item);
      }
      else if (item.type == 'warning') {
        let tempGateway = this.getGatewayDetails(item.gatewaycode);
        item.getewayName = tempGateway.name;
        item.time = moment(item.time).fromNow();
        this.warnings.push(item);
      }
      else if (item.type == 'info') {
        let tempGateway = this.getGatewayDetails(item.gatewaycode);
        item.getewayName = tempGateway.name;
        item.time = moment(item.time).fromNow();
        this.info.push(item);
      }
    })
  }
})
  .catch((err) => {
    console.log(err);
  })
}

clearGatewayError(id) {
this.appService.updateGatewayError(id).then((resp: any) => {
  console.log(resp)

  if (resp.success) {
    console.log(resp);
    this.getNotifications();
  }
  else {
    console.log(resp);
    }
  })
 }

这是我的component.html代码

<li *ngFor="let error of errors">
    <div class="card list-view-media">
      <div class="card-block" style="border: 1px solid red">
          <div class="media" style="margin-top: 20px">
            <div class="media-body">
               <div class="col-xs-12">
                <h6 class="d-inline-block">{{error?.getewayName}}</h6>
            </div>
             <p>{{error?.description}}</p>
             <div class="m-t-15">
                 <span style="font-size: 12px">{{error?.time}}</span>
             </div>
          </div>
        </div>
      <button class="btn btn-primary" style="float: right;" (click)="clearGatewayError(error._id)">Clear</button>
     </div>
    </div>
   </li>

Answer 1

首先，您应该清空数组，然后再开始向其上推送项目，否则您会得到重复项。你有更多关于你的问题的背景吗？就像 resp.success 是真的， gatewayErrors 在你调用 clearGatewayError 之前和之后是什么？

如何在 Angular5 中更新 Html 组件上的列表

How to Update List On Html Component in Angular5

typescript

angular5

dynamic-list