Angular 4组件间数据属性绑定报错：Property 'tasks1'不存在

嘿，我来帮你搞定这个问题！你遇到的Property 'tasks1' does not exist on type 'TaskListComponent'错误，核心原因是你的TaskListComponent类里没有显式声明tasks1这个输入属性——虽然你在组件装饰器里加了inputs: ['tasks1']，但Angular在生成组件工厂类的时候，找不到类对应的属性，所以抛出了这个错误。另外你的模板里还有个小细节错误，也一起给你修正了。

第一步：修正task-list.component.ts的代码 #

我推荐用Angular官方更推荐的@Input()装饰器来声明输入属性（比inputs数组写法更清晰，类型检查也更友好），同时别忘了导入Task类型，避免类型报错：

import { Component, OnInit, Input } from '@angular/core';
import { Task } from '../task'; // 必须导入Task类型，确保类型匹配

@Component({
  selector: 'task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.scss']
  // 删掉原来的inputs数组，改用@Input()装饰器
})
export class TaskListComponent implements OnInit {
  @Input() tasks1: Task[] = []; // 显式声明输入属性，加上类型和默认空数组，防止undefined

  constructor() { }

  ngOnInit() {
  }
}

第二步：修正task-list.component.html的模板 #

你的模板有两个小问题：一是缺少开头的<ul>标签，二是用了不存在的title字段（你的数据里是subject），修正后如下：

<ul>
  <li *ngFor="let task123 of tasks1">
    <a> {{task123.subject}} </a>
  </li>
</ul>

为什么要这么改？ #

• 用@Input()在类里直接声明属性，是Angular的最佳实践，能让输入属性的定义更直观，同时TypeScript的类型检查能帮你提前发现数据类型不匹配的问题。
• 给tasks1设置默认空数组，可以避免组件初始化时因为输入属性未传递而出现undefined的报错。
• 模板里的字段必须和你的Task接口/数据结构对应，你原数据里的标题字段是subject，所以不能用title，否则页面会显示空内容。
• 补上<ul>标签，保证HTML结构的完整性，避免渲染异常。

修改完成后，重启你的Angular项目，task-center组件里的tasks1数组就能正确传递到task-list组件，页面上会渲染出两个列表项，分别显示"Yeah"和"Yow"啦！

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