在输入值发生变化时更新ngFor
在输入值发生变化时更新ngFor
提问于 2017-05-23 12:18:25
我正在尝试更好地理解Angular 2，我收到了来自endpoint的人员列表，并且该列表会定期更改。人员组件：
@Component({
selector: 'people-display',
template: <ol class="people-list">
<li *ngFor="let person of people">
<attendees [people]="peopleValue"></attendees>
</li>
</ol>
})
export class PeopleComponent implements OnChanges {
@Input() people: string[];
}与会者组件：
@Component({
selector: 'attendees',
templateUrl: '<span>{{attendees}}</span>',
})
export class AttendeesComponent implements OnInit {
constructor() { }
ngOnInit() {}
}我一直在寻找一种方法，可以在输入值发生变化时自动更新我的模板。我还没有找到这样做的方法。我已经考虑过做一个setTimout，但必须有更有效的方法。有没有人可以帮我或者给我指个方向？我需要ngFor动态更新。
回答 3
Stack Overflow用户
发布于 2017-05-23 12:23:22
问题是如何将people传递给组件。
假设您的组件是my-people，那么您应该按如下方式传递people
<my-people [people]="peopleValue" .... ></my-people>Stack Overflow用户
发布于 2017-05-23 12:29:05
您无需手动执行任何操作即可跟踪更改，angular2框架会自动执行此操作，并确保将人员作为输入传递给子组件。
假设mycomponent是您的子组件，people是输入
<mycomponent [people]="peopleValue" .... ></mycomponent>Stack Overflow用户
发布于 2017-05-23 12:30:09
出于您的目的，Angular为您提供了two way binding，其中对模型的任何进一步更改都会自动重新选择到模板中，反之亦然。
示例：
列表组件
@Component({
selector: 'my-comp',
template: `<ul>
<li *ngFor="let item of people">{{item}}</li>
</ul>`
})
export class MyComp {
@Input() people: string[];
}使用
@Component({
selector: 'main-comp',
template: '<my-comp [people]="list"></my-comp>'
})
export class MainComp {
private list: string[];
ngOnInit() {
this.list= ['male', 'female'];
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44125731
复制相关文章
相似问题
腾讯云开发者
