Angular中@Input无法获取数组更新值的问题求助

你的问题核心在于两点：

1. 子组件的ngOnInit仅在组件初始化阶段执行一次，此时父组件还未执行数组的push操作，所以打印的是空数组；后续父组件更新数组时，ngOnInit不会再次触发。
2. 数组属于引用类型，push操作仅修改数组内部元素，不会改变数组的引用地址。Angular默认的变更检测机制对引用类型的内部变化不敏感，不会主动触发子组件的更新逻辑。

方案1：修改父组件数组更新方式，触发引用变化 #

通过创建新数组的方式替换原数组，让Angular能检测到引用变更，自动触发子组件更新：

// 父组件填充数组代码修改为：
let bagValue = this.packageSelected.value.toString();
let bagName = this.packageSelected.name;
let bagAmount = this.packageSelected.bagAmount.toString();
let bagImage = this.packageSelected.imagePath;

// 使用扩展运算符创建新数组，替换原数组
this.packageName = [...this.packageName, bagName];
this.valueEstatic = [...this.valueEstatic, bagValue];
this.packageValue = [...this.packageValue, bagValue];
this.packageImage = [...this.packageImage, bagImage];
this.packageAmount = [...this.packageAmount, bagAmount];

子组件可保留ngOnInit，但如果需要实时监听更新，建议改用ngOnChanges钩子。

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

ngOnChanges会在输入属性的引用发生变化时触发，可精准捕获数组的更新：

// 子组件TS代码修改：
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-lunch-review-dialog',
  // 其他组件配置
})
export class LunchReviewDialogComponent implements OnChanges {
  @Input() namePackage: Array<string> = [];
  @Input() estaticValue: Array<string> = [];
  @Input() valueBag: Array<string> = [];
  @Input() linkImage: Array<string> = [];
  @Input() amountBag: Array<string> = [];
  @Input() finalValueBag: number;

  ngOnChanges(changes: SimpleChanges): void {
    // 检测每个输入属性的变化并打印
    if (changes['namePackage']) {
      console.log("@Input NP is " + this.namePackage);
    }
    if (changes['estaticValue']) {
      console.log("@Input EV is " + this.estaticValue);
    }
    if (changes['valueBag']) {
      console.log("@Input VB is " + this.valueBag);
    }
    if (changes['linkImage']) {
      console.log("@Input LI is " + this.linkImage);
    }
    if (changes['amountBag']) {
      console.log("@Input AB is " + this.amountBag);
    }
    if (changes['finalValueBag']) {
      console.log("@Input FVB is " + this.finalValueBag);
    }
  }
}

方案3：手动触发变更检测（适合必须用push的场景） #

如果父组件必须保留push操作，可通过ChangeDetectorRef手动触发子组件的变更检测：

// 子组件TS代码：
import { Component, Input, OnInit, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-lunch-review-dialog',
  // 其他组件配置
})
export class LunchReviewDialogComponent implements OnInit {
  @Input() namePackage: Array<string> = [];
  // 其他输入属性

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit(): void {
    this.logInputs();
  }

  // 提供公共方法，供父组件调用以更新并打印
  updateAndLog(): void {
    this.cdr.detectChanges();
    this.logInputs();
  }

  private logInputs(): void {
    console.log("@Input NP is " + this.namePackage);
    console.log("@Input EV is " + this.estaticValue);
    console.log("@Input VB is " + this.valueBag);
    console.log("@Input LI is " + this.linkImage);
    console.log("@Input AB is " + this.amountBag);
    console.log("@Input FVB is " + this.finalValueBag);
  }
}

// 父组件修改：
// 1. HTML中给子组件添加引用标识
// <app-lunch-review-dialog #dialogRef [namePackage]="packageName" ...></app-lunch-review-dialog>

// 2. TS中调用子组件方法
import { ViewChild } from '@angular/core';
import { LunchReviewDialogComponent } from './lunch-review-dialog.component';

@Component({
  // 父组件配置
})
export class ParentComponent {
  @ViewChild('dialogRef') dialogRef: LunchReviewDialogComponent;

  fillArrays(): void {
    let bagValue = this.packageSelected.value.toString();
    let bagName = this.packageSelected.name;
    let bagAmount = this.packageSelected.bagAmount.toString();
    let bagImage = this.packageSelected.imagePath;
    this.packageName.push(bagName);
    this.valueEstatic.push(bagValue);
    this.packageValue.push(bagValue);
    this.packageImage.push(bagImage);
    this.packageAmount.push(bagAmount);
    
    // 触发子组件更新
    this.dialogRef.updateAndLog();
  }
}

• 优先使用创建新数组的方式更新数据，代码简洁且符合Angular变更检测的设计逻辑，性能更优。
• 避免使用ngDoCheck（会在每次变更检测周期执行，带来不必要的性能开销）。
• 若需要实时响应输入变化，ngOnChanges是最精准的选择。

内容的提问来源于stack exchange，提问作者Vinícius Kock