Question

我有一个包含两个组件的Angular应用程序，可以通过导航栏导航到它们。这两个组件都代表各自的视图，并定期向API发送http请求。

当我在组件之间来回导航时，一个组件中的表中的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>

Answer 1

我不确定，但这也许会有所帮助，当您将数据推送到数组时不会进行更改检测。因此，ngFor不会再次触发。解决该问题的方法是使用散布运算符或Object.assign不变地更新_agvList。

导航至其他组件并返回不会再次触发ngFor

1 个答案: