Angular子组件接收父组件数组属性后无法通过*ngFor渲染的问题求助

嗨，我来帮你排查这个问题！核心问题出在父组件传递jobs属性的语法上。

你当前用的是jobs={{jobs}}这种插值表达式，它会把数组自动转换成字符串格式（也就是你console.log看到的"[object Object],[object Object]"），但子组件需要的是一个数组对象，*ngFor只能遍历数组类型的数据，所以才会出现无法渲染的情况。

快速修复方案： #

把父组件模板里的属性传递改成方括号的属性绑定语法，这样Angular才会把jobs作为数组对象传递给子组件：

<div>
  <table-list [jobs]="jobs"></table-list>
</div>

额外的代码优化建议： #

为了让代码更健壮、类型更安全，建议给子组件的输入属性指定明确的类型：

1. 先定义一个Job接口（可以放在子组件文件里，或者单独的共享类型文件中）：

interface Job {
  name: string;
  start: string;
  finish: string;
}

2. 然后修改子组件的@Input定义，同时设置默认值避免undefined的情况：

@Input() jobs: Job[] = [];

这样修改之后，子组件就能正确接收数组，*ngFor也能正常循环渲染出表格内容了，你可以再打印this.jobs验证一下，应该能看到完整的数组对象啦！

备注：内容来源于stack exchange，提问作者Toquinhoro