How to Update List On Html Component in Angular5

Question

I have component named "Alarms" in which i am calling this.getNotifications(); Function to get all notifications and binding those notifications as a list on my template. There is an option to clear each alarm. I am calling clearGatewayError() function to update alarms so the list should be updated as after updating alarms. But the list is not updating on the template.

This is my 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);
    }
  })
 }

This is my component.html code

<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

First you should empty the arrays before you strart pushing items on it, else you will get duplicates. And do you have some more context of your problem. Like is resp.success is true and what gatewayErrors is before and after you call clearGatewayError?