将 ViewChild 用于动态元素 - Angular 2 和 ionic 2

Question

我想使用我动态添加的多个IonicSlides。但我不能使用@viewChild.请提出解决此问题的方法。

模板.html ：

<div *ngFor="let name of title;let i = index;">
    <ion-slides  id="something" #slides>
        //some code
    </ion-slides>
</div

组件.ts ：

  @ViewChild('slides') slides: QueryList<Slides>;
  ....
  ngAfterViewInit(){
        setTimeout(()=>{
              alert(this.slides.toArray()); //this line rise error 
        }, 3000);
  }

错误：

_this.slides.toArray 不是一个函数

Answer 1

使用 @ViewChildren 代替 @ViewChild ， 阅读更多

@ViewChild ：

您可以使用 ViewChild 获取第一个元素或指令 匹配视图 DOM 中的选择器。

@ViewChildren ：

您可以使用 ViewChildren 获取元素的查询列表或 来自视图 DOM 的指令。

Answer 2

>@ViewChild用于单个元素或指令。若要从视图 DOM 获取元素或指令的QueryList，请使用 @ViewChildren

.HTML

<div *ngFor="let name of title;let i = index;" #slides>
    <ion-slides  id="something">
        //some code
    </ion-slides>
</div

组件.ts

@ViewChildren("slides") private slides: QueryList<ElementRef>;
  ....
ngAfterViewInit(): void {
    this.slides.changes.subscribe(() => console.log(this.slides));
}