带有* ngFor的Angular 2模板引用变量

发布时间：2020-12-17 07:50:10 所属栏目：安全来源：网络整理

导读：我有两个组件：列表和详细信息在列表组件中,我想渲染多个细节组件. list.component.ts @Component({ selector: 'detail',templateUrl: './detail.component.html'})export class DetailComponent { @ViewChild('details') details; public items = { // ...

我有两个组件：列表和详细信息

在列表组件中,我想渲染多个细节组件.

list.component.ts

@Component({
    selector: 'detail',templateUrl: './detail.component.html'
})
export class DetailComponent {
    @ViewChild('details') details;

    public items = {
        // ...
    }
}

list.component.html

<detail *ngFor="let item of items" #details></detail>

注意#details tempalte引用变量.我想访问所有细节组件.可以将#details变量设为数组吗？

@ViewChildren('details') details:QueryList<DetailComponent>;

ngAfterViewInit() {
  console.log(this.details.toArray());
  this.details.changes.subscribe(changes => {
    console.log(this.details.toArray());
  });
}

另见angular 2 / typescript : get hold of an element in the template

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!