Angular 5组件间模型传递异常：@Input接收值为undefined

我正在使用Angular 5开发单页面应用（SPA），拥有父、子两个组件。我从父组件调用API，并将API响应转换为Model。现在我希望将该Model传递给另一个组件，已使用@Input来接收Model，但该Model能在视图中渲染，却无法在组件内捕获，控制台打印该Model时显示undefined。

父组件代码 #

import {Component, Inject, OnInit} from '@angular/core'; 
import {MAT_DIALOG_DATA, MatDialog} from "@angular/material"; 
import {SpecDetailsServ } from "../services/SpecDetailsServ"; 
import {SpecDetailsModel} from "../models/SpecDetailsModel"; 
import {Quote} from "../models/Quote"; 
import {ServiceDialogComp} from "./ServiceDialogComp"; 
import {QuoteDetailsDialogComp} from "./QuoteDetailsDialogComp"; 

@Component({ 
  selector: 'app-spec-details-comp', 
  templateUrl: '../views/spec-details.html', 
  styleUrls: ['../../assets/css/component.css'] 
}) 
export class SpecDetailsComp implements OnInit { 
  customerId = 1; 
  getSpecDetails: Array<SpecDetailsModel>; 
  showLoader = true; 
  getQuotes: Quote; 

  constructor(private getspecdetails: SpecDetailsServ, private matdialog: MatDialog) { 
    this.getspecdetails.getSpecDetails(1).subscribe(res => { 
      var resNew:any = res; 
      this.getSpecDetails = resNew.result; 
      this.showLoader = false; 
    }) 
  } 

  ngOnInit() {} 
} 

父组件视图 #

<app-quote-details [getSpecDetails]="getSpecDetails"></app-quote-details>

子组件代码 #

import {Component, Inject, OnInit, Input} from '@angular/core'; 
import {SpecDetailsComp} from "./SpecDetailsComp"; 
import {MAT_DIALOG_DATA, MatDialog} from "@angular/material"; 

@Component({ 
  selector: 'app-quote-details', 
  templateUrl: '../views/quote-details.html', 
  styleUrls: ['../../assets/css/component.css'], 
}) 
export class QuoteDetailsDialogComp { 
  //this is the model i wanna pass to other component with data init 
  @Input() getSpecDetails: Array<SpecDetailsModel>; 

  constructor() { 
    console.log(this.message); 
  } 
} 

Hey there, let's break down why your getSpecDetails is showing up as undefined in the child component's constructor even though it renders fine in the view!

核心原因：异步加载的时序问题 #

你的父组件通过API异步获取getSpecDetails数据，而子组件的构造函数会在组件初始化时立即执行——这时候API请求还没完成，getSpecDetails自然是undefined。后续API响应返回后，Angular的变更检测机制会更新@Input属性，所以视图能正常渲染，但构造函数只会执行一次，当时拿不到数据。

下面是几种靠谱的解决方案：

方案1：使用ngOnChanges生命周期钩子 #

这个钩子会在@Input属性发生变化时触发，刚好能捕获到异步加载完成后的数据更新。修改子组件如下：

import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
import {SpecDetailsModel} from "../models/SpecDetailsModel"; // 别忘了导入你的Model！

@Component({
  selector: 'app-quote-details',
  templateUrl: '../views/quote-details.html',
  styleUrls: ['../../assets/css/component.css'],
})
export class QuoteDetailsDialogComp implements OnChanges {
  @Input() getSpecDetails: Array<SpecDetailsModel>;

  constructor() {}

  ngOnChanges(changes: SimpleChanges) {
    // 检查getSpecDetails是否已更新且不为空
    if (changes.getSpecDetails && changes.getSpecDetails.currentValue) {
      console.log("拿到getSpecDetails数据了：", this.getSpecDetails);
      // 在这里处理你的业务逻辑
    }
  }
}

方案2：给@Input设置setter函数 #

通过setter可以在@Input属性值变化时立即做出响应：

import {Component, Input} from '@angular/core';
import {SpecDetailsModel} from "../models/SpecDetailsModel";

@Component({
  selector: 'app-quote-details',
  templateUrl: '../views/quote-details.html',
  styleUrls: ['../../assets/css/component.css'],
})
export class QuoteDetailsDialogComp {
  private _getSpecDetails: Array<SpecDetailsModel>;

  @Input() set getSpecDetails(value: Array<SpecDetailsModel>) {
    this._getSpecDetails = value;
    if (value) {
      console.log("通过setter拿到getSpecDetails：", this._getSpecDetails);
      // 在这里处理你的业务逻辑
    }
  }

  get getSpecDetails(): Array<SpecDetailsModel> {
    return this._getSpecDetails;
  }

  constructor() {}
}

额外建议：给视图加空值保护 #

虽然现在视图能渲染，但为了避免数据加载延迟导致的报错，建议在子组件视图中添加空值判断：

<!-- quote-details.html -->
<div *ngIf="getSpecDetails">
  <!-- 示例：遍历渲染数据 -->
  <div *ngFor="let item of getSpecDetails">{{ item.yourPropertyName }}</div>
</div>

另外，注意你的子组件代码里缺少SpecDetailsModel的导入语句，记得补上，避免出现类型错误哦！

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