Question

在我的模板中，我使用* ngFor

<div #listofbars *ngFor="let points of pointsNormalized; let i =index" [attr.data-index]="i">

<div *ngIf="i < 10" class="ranking d-flex align-items-center" [ngClass]="setBarClass(i)" [attr.id]="'bar-id-' + i">

然后我尝试像这样访问第0个子元素：

@ViewChildren("listofbars")  list_container: QueryList<ElementRef>;

if (this.list_container) {
	if (this.list_container.toArray()[0]) {
		console.log(this.list_container.toArray()[0].nativeElement);
	}
}

但是，当我检查Chrome控制台时，该元素实际上并没有包含在html源代码中。我正在尝试使用元素引用来构建动画，但是当我访问ngFor中的元素时，它不起作用（当我在ngFor之外的元素上对其进行尝试时，它已经起作用了）。在ngFor指令中获取本机元素引用的正确方法是什么？

Answer 1

尽管我不确定您在哪里运行日志记录代码，但我确定是因为在ngAfterContentInit之前未设置ViewChildren。因此，首先要做的是将代码放入 ngAfterViewInit() { }（在contentInit之后触发）。
接下来，我将订阅QueryList上的更改。所以：

@ViewChildren("listofbars")  childrenQuery: QueryList<ElementRef>;

ngAfterViewInit() {
    this.childrenQuery
      .changes
      .subscribe((list) => {
        console.log("Native element", list.toArray()[0].nativeElement);
      })
}

或者，如果您真的只需要第一个条目，则可以使用美学

console.log("Native element", list.first.nativeElement);

ElementRef不包含在源代码中

1 个答案: