Angular父组件传递后端API数据到子组件时出现undefined问题

问题原因 #

1. 你的子组件<app-edit-products>默认就已经在父组件DOM中渲染了，只是用display: none隐藏，子组件初始化执行ngOnInit时，你还没有点击编辑按钮给父组件的pro变量赋值，初始的pro就是undefined，所以打印为空。
2. 你的编辑按钮同时加了routerLink="Edit-Product"，如果你的实际需求是点击跳转到独立的编辑页面，那么你在隐藏div里写的子组件和路由渲染出来的编辑子组件是两个完全独立的实例，你给隐藏的实例传值，路由生成的实例自然收不到。

方案1：使用弹框模式编辑（不需要跳转路由） #

把你隐藏子组件的方式从display: none改成*ngIf动态渲染，同时去掉编辑按钮的routerLink属性：

<!-- 修改编辑按钮，去掉routerLink -->
<button type="button" (click)="EditProductClick(dataProduct)" class="btn btn-light mr-1">
  Edit
</button>   

<!-- 修改子组件外层div，用*ngIf控制渲染时机 -->
<div class="modal-body" *ngIf="ActiveEdit" >
   <app-edit-products [Pro]="pro"></app-edit-products>
</div>

*ngIf会在ActiveEdit变为true时才初始化子组件，此时你已经给pro赋值完成，子组件ngOnInit就能正常拿到传入的参数。

方案2：使用路由跳转模式编辑 #

如果你的需求是点击编辑跳转到独立编辑页，那么Input传值方式无效，需要通过路由参数传值：

1. 修改父组件编辑按钮的路由跳转逻辑，携带产品ID：

<button type="button" routerLink="/Edit-Product/{{dataProduct.id}}" class="btn btn-light mr-1">
  Edit
</button>

2. 子组件中接收路由参数，调用接口获取对应产品数据：

import { ActivatedRoute } from '@angular/router';
// 其他导入省略

export class EditProductsComponent implements OnInit {
  Pro:any;
  constructor(private route: ActivatedRoute, private service: ApiServiceService) { }

  ngOnInit(): void {
    // 获取路由中的产品ID
    const productId = this.route.snapshot.params['id'];
    // 调用接口查询产品详情
    this.service.GetProductById(productId).subscribe(data => {
      this.Pro = data;
      console.log(this.Pro);
    })
  }
}

补充方案 #

如果你确实需要提前渲染子组件，后续再更新传入值，可以在子组件中用ngOnChanges监听Input参数的变化：

import { OnChanges, SimpleChanges } from '@angular/core';
// 其他导入省略

export class EditProductsComponent implements OnInit, OnChanges {
  @Input() Pro:any;
  constructor() { }

  ngOnInit(): void {
    // 初始化拿不到是正常的，后续变化会触发ngOnChanges
  }

  ngOnChanges(changes: SimpleChanges): void {
    // 监听Pro的变化
    if(changes['Pro'] && changes['Pro'].currentValue) {
      console.log(this.Pro);
      // 这里处理拿到数据后的逻辑
    }
  }
}

内容的提问来源于stack exchange，提问作者Anh Minh Diệp