使用@ViewChildren的Angular 5访问div列表 [英] Angular 5 access divs list using @ViewChildren
问题描述
我想获取所有以id'div'开头的div.为此,我使用@ViewChildren但由于我有一个空数组而无法访问div,为什么?
I want to fetch all divs starting with the id 'div'. To do so, i use @ViewChildren but i'm not able to access the divs because i have an empty array , why ?
我的模板
<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
}
推荐答案
如此详细答案中所述,有效ViewChildren
的选择器包括组件类型,指令类型和模板引用变量.您不能使用CSS选择器(例如HTML元素类型(例如div
)或类名)使用ViewChildren
检索DOM元素.
As mentioned in this detailed answer, the valid selectors for ViewChildren
include component types, directive types, and template reference variables. You cannot retrieve DOM elements with ViewChildren
using CSS selectors like HTML element types (e.g. div
) or class names.
一种适合您的情况的方法是使用ngFor
循环生成div
元素,并将模板引用变量#divs
与其关联:
One way to make it work in your case is to generate the div
elements with an ngFor
loop, and associate a template reference variable #divs
to them:
<div #divs *ngFor="let item of [1,2]" [id]="'div-' + item">Div {{item}}</div>
<button (click)="getDivs()">Get divs</button>
然后您可以使用模板引用变量使用ViewChildren
在代码中检索它们:
You can then retrieve them in code with ViewChildren
, using the template reference variable:
@ViewChildren("divs") divs: QueryList<ElementRef>;
getDivs() {
this.divs.forEach((div: ElementRef) => console.log(div.nativeElement));
}
有关演示,请参见此stackblitz .
这篇关于使用@ViewChildren的Angular 5访问div列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!