Angular中父组件向子组件传值失败：子组件数组长度为0

核心原因分析 #

你遇到的问题大概率是父组件的数组数据为异步加载，子组件初始化时数据还未返回，导致读取到空数组。比如父组件通过HTTP请求或其他异步操作获取数据，子组件在ngOnInit钩子执行时，父组件的数组还未被赋值，所以长度为0。

具体解决方法 #

方法1：用*ngIf确保数据加载后再渲染子组件

在父组件模板中给子组件添加*ngIf判断，只有当数组有数据时才渲染子组件，避免子组件拿到空值：

<app-student-count 
  [students]="students" 
  *ngIf="students && students.length > 0"
></app-student-count>

方法2：子组件用ngOnChanges监听输入变化

子组件中替换ngOnInit为ngOnChanges钩子，每次输入属性更新时都会触发，能及时获取到最新的数组数据：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-student-count',
  templateUrl: './student-count.component.html'
})
export class StudentCountComponent implements OnChanges {
  @Input() students: any[] = [];

  ngOnChanges(changes: SimpleChanges): void {
    // 检测students属性是否有变化，且当前值有效
    if (changes['students']?.currentValue) {
      console.log('当前数组长度:', this.students.length);
      // 这里处理你的业务逻辑
    }
  }
}

方法3：使用AsyncPipe（如果数据是Observable类型）

如果父组件的数组是通过Observable异步获取的，直接用AsyncPipe自动处理订阅和数据更新，无需手动管理：

// 父组件代码
import { Observable } from 'rxjs';
import { StudentService } from './student.service';

export class StudentDashboardComponent {
  students$: Observable<any[]>;

  constructor(private studentService: StudentService) {}

  ngOnInit(): void {
    this.students$ = this.studentService.getStudents();
  }
}

父组件模板：

<app-student-count [students]="students$ | async"></app-student-count>

额外检查点 #

• 确认子组件中@Input()装饰器的属性名和父组件模板中的绑定名完全一致（大小写敏感）。
• 检查父组件中数组是否被正确赋值，比如是否在异步回调里才给数组赋值，而非同步初始化。

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