Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular2-让ngFor将#项传递给构造的实例_Angular - Fatal编程技术网

Angular2-让ngFor将#项传递给构造的实例

Angular2-让ngFor将#项传递给构造的实例,angular,Angular,假设我有以下形式的数据对象列表: 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的一部分传递到实例中,或者通过以某种方式赋予实例对

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

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\u object.name
并获得
Alice
Bob
Clara
的值

有没有关于如何做到这一点的建议,或者有没有更好、更“有角度”的方法


谢谢大家:)

您可以使用
个人小部件的参数
组件:

<person-widget *ngFor="#item of my_list" [item]="item"></person-widget>
@Component({
  selector: 'person-widget',
  template: `
    <div>{{item.name}}</div>
  `
})
export class PersonWidgetComponent {
  @Input()
  item: any;

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