Angular中ngFor循环传递整个数组而非单个元素的问题

嘿，我一眼就发现问题所在啦！你在使用*ngFor循环的时候，犯了一个很容易疏忽的小错误：

错误根源 #

你在父组件的模板里写了：

<app-sever-element *ngFor="let server_element of serverElements" [element]="serverElements"></app-sever-element>

这里的*ngFor已经把数组里的每一项赋值给了server_element，但你绑定[element]的时候，却把**整个数组serverElements**传了进去，而不是当前迭代的单个元素server_element。这就导致子组件里拿到的是数组，而不是你期望的单个对象，自然访问element.name和element.content时会找不到对应属性，渲染出空元素，用{{element | json}}看到的也是整个数组。

修正后的代码 #

只需要把绑定的变量改成当前迭代项server_element就好：

<app-sever-element *ngFor="let server_element of serverElements" [element]="server_element"></app-sever-element>

验证一下 #

修正后，子组件的模板：

<div class="panel panel-default">
  <div class="panel-heading">{{ element.name }}</div>
  <p>{{ element.content }}</p>
</div>

配合AppComponent里的数组：

serverElements = [ 
  { type: 'server', name: 'Test', content: 'This is only a test' } 
];

就能正常渲染出带有名称和内容的面板了。如果数组里有多个对象，每个迭代也会正确传递对应的单个元素，不会再出现整个数组的情况。

内容的提问来源于stack exchange，提问作者Nicolas M. Pardo