Угловой список доступа 5 div с использованием @ViewChildren - PullRequest
Новая
       19

Угловой список доступа 5 div с использованием @ViewChildren

0 голосов
/ 27 октября 2018

Я хочу получить все div, начиная с id 'div'.Для этого я использую @ViewChildren, но не могу получить доступ к div, потому что у меня пустой массив, почему?

Мой шаблон 

<div id="div-1">Div 1</div>
<div id="div-2">Div 2</div>
<input type="button" (click)="getDivs()">

Компонент 

@ViewChildren('div') divs: QueryList<any>;
divList : any[];

getDivs(){ 
   this.divList = this.divs.filter(x => x.id.lastIndexOf('div-', 0) === 0);  
   console.log(this.divList);  
      // this.divList return an empty array but i should have two results  
}

1 Ответ

0 голосов
/ 27 октября 2018

Как уже упоминалось в этом подробном ответе , допустимые селекторы для ViewChildren включают типы компонентов, типы директив и ссылочные переменные шаблона. Вы не можете извлечь элементы DOM с помощью ViewChildren, используя CSS-селекторы, такие как типы элементов HTML (например, div) или имена классов.

Один из способов заставить его работать в вашем случае - это сгенерировать элементы div с циклом ngFor и связать с ними переменную ссылки шаблона #divs: 

<div #divs *ngFor="let item of [1,2]" [id]="'div-' + item">Div {{item}}</div>
<button (click)="getDivs()">Get divs</button>

Затем вы можете получить их в коде с помощью ViewChildren, используя переменную ссылки на шаблон: 

@ViewChildren("divs") divs: QueryList<ElementRef>;

getDivs() {
  this.divs.forEach((div: ElementRef) => console.log(div.nativeElement));
}

См. этот стек для демонстрации.

...