Angular2 获取对在 ngFor 中创建的元素的引用

Question

我将如何引用在 ngFor 循环中创建的 dom 中的元素。

例如我有一个要迭代的元素列表:

var cookies: Cookie[] = [...];

<div *ngFor="#cookie of cookies" id="cookie-tab-button-{{cookie.id}}" (click)="showcookie(cookie);">Cookie tab</div>


<div *ngFor="#cookie of cookies" id="cookie-tab-content-{{cookie.id}}" ">Cookie Details</div>

我将如何引用这些 div，以便我可以添加一个 css 类，如“is-active”。或者我的方法是错误的。

Answer 1

如果你想添加/删除一个类使用绑定(bind)

<div *ngFor="let cookie of cookies" [class.isActive]="someExpression" ....>

或

<div *ngFor="let cookie of cookies" [ngStyle]="{'isActive': someExpression}" ....>

具体例子:

activeCookie:string = 'b';
cookies:string[] = ['a', 'b', 'c'];

<div *ngFor="letcookie of cookies" [class.isActive]="cookie == activeCookie" ....>

如果你真的想得到一个引用，你可以使用

<div #someName *ngFor="let cookie of cookies" id="cookie-tab-button-{{cookie.id}}" (click)="showcookie(cookie);">Cookie tab</div>

@ViewChildren('someName') someDivs;

ngAfterViewInit() { // or some event handler
  someDivs.toArray()[0].nativeElement.classList.add('isActive');
}