Как обновить список компонентов HTML в Angular5 - PullRequest
Новая
       12

Как обновить список компонентов HTML в Angular5

0 голосов
/ 16 октября 2018

У меня есть компонент с именем «Alarms», в котором я вызываю this.getNotifications(); Функция для получения всех уведомлений и привязки этих уведомлений в виде списка в моем шаблоне.Есть возможность очистить каждый будильник.Я вызываю clearGatewayError() функцию для обновления сигналов тревоги, поэтому список должен обновляться как после обновления сигналов тревоги.Но список не обновляется в шаблоне.

Это мои тревоги. 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>

1 Ответ

0 голосов
/ 16 октября 2018

Сначала вы должны очистить массивы, прежде чем натягивать на них предметы, иначе вы получите дубликаты.И у вас есть еще какой-то контекст вашей проблемы.Например, resp.success - это правда, а gatewayErrors - до и после вызова clearGatewayError?

...