Angular2 Получить ссылку на элемент, созданный в ngFor

Как мне обратиться за ссылкой на элемент в dom, который был создан в цикле ngFor.

например. У меня есть список элементов, которые я повторяю:

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". Или мой подход ошибочен.

Ответ 1

Если вы хотите добавить/удалить привязку к использованию класса

<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');
}

Ответ 2

<style>
      .active{
          background:blue;
      }
</style>



<div [ngClass]="{active:(i==selectedIndex)}" 
     *ngFor="#cookie of cookies;#i=index"        
      id="cookie-tab-button-{{cookie.id}}"  
      (click)="showcookie(cookie,i);">Cookie tab
</div>



showcookie(val, i){
        console.log(val + i);
        this.selectedIndex=i;
}

Ответ 3

Вы можете использовать ng-контейнер, который не будет отображаться:

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

Ответ 4

<div *ngFor="let item of items" (click)="itemClick($event.currentTarget)"></div>

itemClick(dom){
  dom.style.color='red';
  // ...
}