Доступ к n-му дочернему элементу списка запросов ViewChildren (Angular)

На самом деле есть несколько способов, с помощью которых вы можете получить доступ к определенному внутри вас QueryLists

1-й метод: .filter()

Вы также можете использовать .map и .reduce в зависимости от ваших предпочтений

// Since if you have 3 items in an array, the counting starts at 0, so 1 is the 2nd element
const elementTwo = this.popovers.filter((element, index) => index === 1);


// Or if you want to be specific based on the data inside the PopoverDirective
// and if that PopoverDirective has an @Input() name, you can access it by:
const elementTwo = this.popovers.filter((element, index) => element.name === 'John');

2-й метод: .forEach()

// You can perform any action inside the .forEach() which you can readily access the element
this.popovers.forEach((element, index) => console.log(element));

3-й метод: первый и последний

this.popovers.first         // This will give you the first element of the Popovers QueryList

this.popovers.last          // This will give the last element of the Popovers QueryList

Необработанный список массивов: .toArray()

this.popovers.toArray();    // This will give you the list of popovers caught by your QueryList

вы можете использовать метод toArray(), а затем вы можете получить доступ по индексу.

Доступ по индексу возможен через Find

  @ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;

  public getByIndex(x: number) {
    return this.popovers.find((_, i) => i == x)
  }