Как получить дочерние элементы созданные ngFor?

Question

[Артем]

<select [(ngModel)]="selectedId" appSelect>
  <option #option *ngFor="let item of Items" [ngValue]="item.id ">{{item.name}}</option>
</select>

@ContentChildren('option') options: QueryList<ElementRef>;
...
ngContentViewInit() {
  this.options.changes.subscribe(...);
}

Можно ли сделать тоже самое, но без переменной шаблона #option

Answer 1

[Дмитрий Еремин]

а как вы используте ViewChildren?
Покажите, пожалуйста

Comments

[Артем]

<select [(ngModel)]="selectedId" appSelect>
  <option #option *ngFor="let item of Items" [ngValue]="item.id ">{{item.name}}</option>
</select>

@ViewChildren('option') options: QueryList<ElementRef>;
...
ngAfterViewInit() {
  this.options.changes.subscribe(...);
}

[Артем]

С ContentChild заработало

ngAfterContentInit() {
  this.options.changes.subscribe((elem) => {
    debugger;
  });
});

Но можно ли как-нибудь избавиться от шаблонной переменной #option?

Answer 2

[Артур]

Артем, есть еще один вариант. Он похож, но его можно встретить у различных создателей кучи всяких компонентов для ангуляра.
Использование пустых директив.

<div class="table-body">
    <ul class="table-list"
        directiveList>
      <li *ngFor="let item of items; let i = index; trackBy: trackByFn"
           class="table-item" directiveItem>
          {{item}}
      </li>
    </ul>
  </div>

Имеется директива directiveList, имеется директива directiveItem.
В классе directiveList находится список этих "дочерних" элементов.

@Directive({
  selector: '[directiveList]',
  exportAs: 'directiveList'
})
export class DirectiveList {
/**
   * Children directives which placed on items
   */
  @ContentChildren(DirectiveItem, {read: ElementRef}) // получаем сразу как список ссылок на компоненты класса
  private _items: QueryList<DirectiveItem>;
}

ngAfterContentInit() {
    this._items.changes.subscribe(() => {
      this.coolFunc();
    });

}

В чем отличие?
Ты отвязываешься от работы с элементами в компоненте. Т.к. сегодня ты хочешь что-то делать со списком элементов, а завтра не хочешь, для этого ты просто уберешь директивы. Компонент практически не изменится.

Но в любом случае через @ContentChildren.

p.s. совсем забыл. Вот сама пустая директива

@Directive({
  selector: '[directiveItem]'
})
export class ClassNewInViewItemDirective {

  constructor() { }

}