Переход к другому компоненту и обратно не вызывает ngFor снова - PullRequest
Новая
       12

Переход к другому компоненту и обратно не вызывает ngFor снова

1 голос
/ 20 июня 2019

У меня есть приложение Angular с двумя компонентами, к которым я могу перемещаться через панель навигации.Оба компонента представляют свое собственное представление и имеют периодический HTTP-запрос к API.

Когда я перемещаюсь вперед и назад между компонентами, ngFor в таблице в одном компоненте больше не срабатывает.Это работает только когда я перезагружаю страницу или когда я впервые захожу туда.Даже изменение базовых данных не работает.

Как я могу снова вызвать ngFor после инициализации компонента и перехода к нему?Я создаю экземпляр этого компонента только один раз, поэтому я знаю, что это тот же самый вид.

Редактировать: вот файлы.

state.components.ts: 

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpRequestService } from '../http-request.service';


@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit, OnDestroy {


constructor(private requestService: HttpRequestService) {

}

ngOnInit() {
  if (!active) {
    active = true;
    setInterval(() => this.httprequest(), 1000);
}

private httprequest() {
// this part changes the underlying data
this._getState('http://localhost:8090/agvs/status/short')
  .subscribe(info => {
    this._agvList = []; // implement in the empty list
    let tmpTime = 0;
    info.forEach(element => {
      if (this._agvList.find(x => x.Id === element.Id) !== undefined) {
        tmpTime = this._agvList.find(x => x.Id === element.Id).Error_time;
      }
      const tmpAgv: Agv_stat = {
        Id: element.Id,
        Online: element.Online,
        Volt: element.Volt,
        Soc: element.Soc,
        Pos: {
          Map: element.Pos.Map,
          X: element.Pos.X,
          Y: element.Pos.Y,
          T: element.Pos.T
        },
        Error: element.Error,
        Old: element.old, // intern
        Error_time: tmpTime // intern
      }
      this._agvList.push(tmpAgv);

      // console.log( 'surch robot ' + this._agvListOld.find(x => x.Id === tmpAgv.Id) );
      if (this._agvListOld.find(x => x.Id === tmpAgv.Id) == undefined) {
        console.log('list_old' + JSON.stringify(this._agvListOld));
        console.log('save robot ' + tmpAgv.Id);
        this._agvListOld.push(tmpAgv);
        console.log('new_list:' + JSON.stringify(this._agvListOld));
      } else {
        tmpAgv.Error_time = this._agvListOld.find(x => x.Id === tmpAgv.Id).Error_time;
      }

      if (tmpAgv.Error !== this._agvListOld.find(x => x.Id === tmpAgv.Id).Error || tmpAgv.Error === '') {
        // console.log(" reset timer !!!");
        tmpAgv.Old = tmpAgv.Error;
        tmpAgv.Error_time = 0;
        this._agvListOld.find(x => x.Id === tmpAgv.Id).Error_time = 0;
      } else {
        // console.log("timer +1");
        this._agvListOld.find(x => x.Id === tmpAgv.Id).Error_time += 1;
        tmpAgv.Error_time = this._agvListOld.find(x => x.Id === tmpAgv.Id).Error_time;
      }
      if (tmpAgv.Error_time > 30) { // after 0.5 minute
        console.log('Add an error : ' + tmpAgv.Error);
        const tmp_err: ErrorState = {
          Id: tmpAgv.Id,
          second: tmpAgv.Error_time,
          description: tmpAgv.Error,
        }
        if (this._agvErrorList.find(x => x.Id === tmpAgv.Id) == undefined) {
          console.log('new Error is created !!!');
          this._agvErrorList.push(tmp_err); // create a new error list
        } else {
          // update the message sec and error text
          this._agvErrorList.find(x => x.Id === tmpAgv.Id).second = tmpAgv.Error_time;
          this._agvErrorList.find(x => x.Id === tmpAgv.Id).description = tmpAgv.Error;
          console.log('timer list :' + tmpAgv.Error_time);
          console.log(this._agvErrorList);
        }
      } else {
        // TODO: delete the error if the timer is reset
      }
      // console.log('Mapped new element: ' + JSON.stringify(tmpAgv)); // stringify(): change json to string
    });
    console.log('agvlist :' + JSON.stringify(this._agvList));
  }, error => {
    console.error(JSON.stringify(error));
    this._agvList = [];
  });
  }
}

state.component.html

<table id="customers">
  <tr>
  <th>Robot</th>
  <th>Batterie</th>
  <th>Zustand</th>
  </tr>
<tr *ngFor="let Agv_stat of _agvList">
  <td>{{Agv_stat.Id}}</td>
  <td>{{Agv_stat.Soc}}</td>
  <td>{{Agv_stat.Error}}</td>
</tr>    
</table>

1 Ответ

0 голосов
/ 20 июня 2019

Я не уверен, но, возможно, это поможет. Обнаружение изменений не происходит, когда вы выполняете передачу в массив. Поэтому ngFor не запускается снова. Чтобы решить эту проблему, необходимо постоянно обновлять _agvList с помощью оператора распространения или Object.assign.

...