Angular2 - 让 ngFor 将#item 传递给构造的实例答案

【问题标题】：Angular2 - get ngFor to pass #item to constructed instanceAngular2 - 让 ngFor 将#item 传递给构造的实例
【发布时间】：2016-03-01 17:26:20
【问题描述】：

假设我有以下形式的数据对象列表：

my_list = [
    {name:Alice, age:23},
    {name:Bill, age:33},
    {name:Clara, age:43}
];

我使用ngFor创建了一组基于数组的自定义组件：

<person-widget *ngFor="#item of my_list"></person-widget>

我想通过将item 参数作为ngFor 的一部分传递给实例，或者通过授予实例访问权限，让PersonWidget 的每个已创建实例能够访问生成它的列表项的属性以某种方式还原原始数据。

基本上，在每个PersonWidget 类中，我希望能够使用my_data_object.name 并获得Alice 或Bob 或Clara 的值。

关于如何执行此操作或是否有更好、更“Angular2”的执行此操作的任何建议？

谢谢大家:)

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用person-widget 组件的参数：

<person-widget *ngFor="#item of my_list" [item]="item"></person-widget>

person-widget 组件必须已定义此参数，如下所述：

@Component({
  selector: 'person-widget',
  template: `
    <div>{{item.name}}</div>
  `
})
export class PersonWidgetComponent {
  @Input()
  item: any;

  ngOnInit() {
    console.log(this.item.name);
  }
}

【讨论】：