Angular 8中数组传递后ngFor迭代属性未定义问题求助

首先，我注意到你模板里的一个明显问题：ngFor指令缺少了星号*！Angular的结构型指令（比如ngFor、ngIf）需要使用*前缀来正确解析，你的代码里写的是：

<li ngFor="let item of portList">

正确的写法应该是：

<li *ngFor="let item of portList">

这很可能是导致遍历失效、item.departurePort报错的核心原因——没有星号的话，Angular无法识别这个结构型指令，相当于没有执行遍历逻辑，模板尝试访问不存在的item属性自然会抛出未定义错误。

如果修复星号后问题仍然存在，再试试下面这些方案：

• 使用安全导航操作符（可选链）：
  即使数组已经存在，也可能存在某个数组项的departurePort属性缺失的情况，或者数据加载存在微小延迟。在模板中添加?.可以避免报错：

  {{item?.departurePort}}
  

• 确保子组件只在数据就绪后渲染：
  在父组件中用*ngIf包裹子组件，确保只有当portList有数据时才传递给子组件：

  <app-child [portList]="portList" *ngIf="portList.length > 0"></app-child>
  

  这样可以避免子组件初始化时接收空数组，减少异步加载带来的渲染问题。

• 优化HTTP请求的处理方式：
  你当前使用toPromise()和手动push数组的方式比较老旧，Angular更推荐使用Observable配合async管道来处理异步数据，这样能自动管理订阅和变更检测：
  父组件修改请求代码：

  getPort(): Observable<any[]> {
    return this.http.get(this.portsApiUrl).pipe(
      map(response => response["masterSchedule"] as any[])
    );
  }
  

  在父组件类中定义一个可观察对象：

  portList$: Observable<any[]>;
  
  ngOnInit() {
    this.portList$ = this.getPort();
  }
  

  然后在父组件模板中用async管道传递数据：

  <app-child [portList]="portList$ | async"></app-child>
  

  这种方式不需要手动维护数组，Angular会自动处理数据加载完成后的渲染，减少出错概率。

• 手动触发变更检测（极端情况）：
  如果以上方法都无效，可能是变更检测没有触发。在子组件中注入ChangeDetectorRef，在数据更新后手动触发：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  ngOnInit() {
    console.log(this.portList);
    this.cdr.detectChanges(); // 手动触发变更检测
  }
  

内容的提问来源于stack exchange，提问作者user11330446