代码之家 › 专栏 › 技术社区 › sanjihan

将#元素绑定到使用*ngFor创建的元素

viewchild angular

12

sanjihan · 技术社区 · 7 年前

我正在使用*ngFor创建一组div。我想把我的手放在其中一个上面,并得到它的宽度。

.html
<div #elReference *ngFor="let el of elements> HEHE </div>

.ts
  @ViewChild("elReference") elReference: ElementRef;

显然,您不能将ViewChild与*ngFor一起使用,因为 elReference 未定义。

如何使用*ngFor创建元素引用?

2 回复 | 直到 7 年前

1

10

Mohammad Kermani 6 年前

无法选择性地添加模板变量,

<div #elReference [attr.foo]="el.x == 'foo' ? true : null" *ngFor="let el of elements> HEHE </div>

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

ngAfterViewInit() {
  console.log(this.elReference.toArray()
      .filter(r => r.nativeElement.hasAttribute('foo')));
}

2

4

Eugene P. 3 年前

有一种更复杂但更正确的指令方式。

<!-- app.component.html -->
<div *ngFor="let el of elements" [id]="el.id"> HEHE </div>

// div-id.directive.ts
import { Directive, Input, ElementRef } from '@angular/core';

@Directive({
  selector: 'div[id]',
})
export class DivIdDirective {
  @Input() id: number;

  constructor(ref: ElementRef<HTMLDivElement>) {
    this.el = ref.nativeElement;
  }

  el: HTMLDivElement;
}

// app.component.ts
export class AppComponent implements AfterViewInit {
  // ...
  @ViewChildren(DivIdDirective) els: QueryList<DivIdDirective>;

  ngAfterViewInit(): void {
    console.log(this.els.map(({id, el}) => ({id, el}));
  }
}