时间戳

首页 > 解决方案 > Angular 5 使用 @ViewChildren 访问 div 列表

angular - Angular 5 使用 @ViewChildren 访问 div 列表

问题描述

我想获取以 id 'div' 开头的所有 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  
}

标签： angularangular-renderer2

解决方案

如本详细答案中所述，有效的选择器ViewChildren包括组件类型、指令类型和模板引用变量。您无法ViewChildren使用 HTML 元素类型（例如div）或类名等 CSS 选择器来检索 DOM 元素。

使其在您的情况下工作的一种方法是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));
}

有关演示，请参阅此 stackblitz。

推荐阅读