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

我有一个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>

机器人
巴蒂
祖斯坦
{{Agv_stat.Id}
{{Agv_stat.Soc}}
{{Agv_stat.Error}

我不确定，但这可能会有所帮助，在推送到阵列时不会发生更改检测。因此，ngFor不会再次触发。解决这个问题的方法是使用spread运算符或Object.assign不可变地更新agvList。

您可以共享这段代码吗？您可以发布.ts文件的内容吗。我会帮你回答。你是如何在组件之间导航的？我不知道否决票是从哪里来的，不是我。我会尝试你的建议，但我怀疑它是否有效，因为我已经清空并重新填充了底层数组。它有效吗？创建一个数组=[]将触发更改检测，但将内容推入其中不会，因此我想ngFor为什么没有运行。您可以尝试添加一个临时数组，在其中推送元素，然后执行array=tempArray