Angular使用@Input父子组件传值时出现类型缺失属性报错如何解决？

报错原因 #

• 核心是传入子组件的变量类型和@Input声明的接收类型不匹配：
  1. 子组件的@Input() element声明要求接收的是单个对象，类型为{type: string, name: string, content: string}
  2. 父组件模板中给[element]绑定的serverElements是对象数组，类型为{type: string, name: string, content: string}[]，数组本身不存在type、name、content三个属性，因此触发类型校验报错
• 你已经通过*ngFor="let element of serverElements"遍历得到了数组中的单个元素变量element，但绑定时未使用该变量，反而传入了整个数组，是错误的直接原因。

解决方法 #

修改app.html中[element]的绑定值，将整个数组serverElements替换为*ngFor遍历出来的单个元素element即可，修改后的代码如下：

<div class="row">
  <div class="col-xs-12">
    <app-server-element 
      *ngFor="let element of serverElements" 
      [element]="element">
    </app-server-element>
  </div>
</div>

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