使用ViewChild处理动态元素 - Angular 2 & ionic 2

Question

我想使用动态添加的多个IonicSlides，但无法使用@viewChild。请提供一种解决此问题的方法。

Template.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不是一个函数

- Mohsen

---

请勿在调试时使用警报（alerts），现在已经是2020年了。 - refaelio

这是两年前Refaelio的问题，不是2020年的。笑。 - Mohsen

@Mohsen 说“2018年和2020年一样糟糕，只是听起来没那么酷，哈哈”。 - Jon

@Mohsen 这只是一种说法。 - refaelio

Answer 1

使用@ViewChildren替代@ViewChild，查看更多

@ViewChild :

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

@ViewChildren :

你可以使用ViewChildren从视图DOM中获取元素或指令的QueryList。

- Vivek Doshi

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

Component.ts

@ViewChildren("slides") private slides: QueryList<ElementRef>;
  ....

ngAfterViewInit(): void {
    this.slides.changes.subscribe(() => console.log(this.slides));
}

- raaaay