Question

我试图更好地了解Angular 2.我收到了来自端点的人员列表，并定期更改列表。人员组成部分：

@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。

Answer 1

问题是如何将people传递给您的组件。

假设您的组件为my-people，那么您应该通过以下people

<my-people [people]="peopleValue" .... ></my-people>

Answer 2

您无需手动执行任何操作以跟踪更改，angular2框架会自动执行此操作，请确保将人员作为输入传递给您的子组件，

假设mycomponent是您的子组件， people 是输入

<mycomponent [people]="peopleValue" .... ></mycomponent>

Answer 3

为了您的目的，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'];
    }
}

输入值更改时更新ngFor

3 个答案: