带有* ngFor的Angular 2模板参考变量 [英] Angular 2 template reference variable with *ngFor

问题描述

我有两个组成部分:列表和详细信息

I have two components: list and detail

在列表组件中，我要呈现多个详细组件.

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 临时引用变量.我想访问所有详细组件.可以将 #details 变量设置为数组吗?

Notice the #details tempalte reference variable. I want to access all of the detail components. It is possible to make the #details variable an array ?

推荐答案

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

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

另请参见 angular2/typescript:获取模板中的元素

这篇关于带有* ngFor的Angular 2模板参考变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！