访问 ViewChildren 查询列表的第 n 个子项 (Angular)

Question

我正在尝试访问 viewchildren 查询列表的第 n 个子项。

下面是我的TS：

@ViewChildren(PopoverDirective) popovers: QueryList<PopoverDirective>;
console.log(this.popovers)

console.log 显示更改、第一个、最后一个、长度和 _results。

如何访问第 n 个子节点（即第 3 个，而不是第一个）？

当我尝试使用 _results（即 this.popovers._results[2]）执行此操作时，出现错误。

谢谢。

Answer 1

你可以使用toArray()方法，然后你可以通过索引访问。

Answer 2

There are actually a couple of methods which you can access a particular inside you QueryLists

第一种方法：.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');

第二种方法：.forEach()

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

第三种方法：第一个和最后一个

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

Answer 3

可以通过索引访问 Find

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

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

访问 ViewChildren 查询列表的第 n 个子项 (Angular)

Access nth child of ViewChildren Querylist (Angular)

angular

viewchild