Question

我从ngFor循环中创建了一系列的mat-expansion-panel。

<mat-expansion-panel *ngFor="let num of countArray" [attr.id]="num + 'exp'" #expPanels>
    <mat-expansion-panel-header>
        <mat-panel-title>
            {{num}}
        </mat-panel-title>
    </mat-expansion-panel-header>
</mat-expansion-panel>

我正在使用ViewChildren在我的.ts代码中引用它们，因为我正在尝试扩展其中之一。

  @ViewChildren("expPanels")
  expPanels :QueryList<MatExpansionPanel>;

之所以这样做是因为我试图选择其中之一并以编程方式对其进行扩展。

const selectedPanel = this.expPanels.find(e => e.id == '5exp');   
selectedPanel.expanded=true;

但是selectedPanel始终为null。

在this.expPanels内部查看，我看到的ID不是我在[attr.id]中设置的ID，它类似于“ cdk-accordion-child-300”。

如何在ViewChildren的QueryList中按ID或其他属性进行过滤，以获取要扩展的面板？

Answer 1

我没有找到一个干净的解决方案，因为如果我查询ElementRef，则无法访问expanded的{{1}}实例属性，并且如果我查询了组件实例，则无法访问dom元素。所以我都问了：

MatExpansionPanel

然后使用dom元素找到正确的索引，然后使用此索引切换正确的组件实例。

  @ViewChildren("expPanels", { read: ElementRef })
  expPanelElems: QueryList<ElementRef>;

  @ViewChildren("expPanels")
  expPanels: QueryList<MatExpansionPanel>;

它可以工作，但我必须承认它不是很干净。如果您可以在const selectedPanelIdx = this.expPanelElems .toArray() .findIndex(e => e.nativeElement.id === "5exp"); this.expPanels.toArray()[selectedPanelIdx].expanded = true;中使用的数据数组中查找索引，则会更简单：

ngFor

如何访问ViewChildren中元素的ID？

1 个答案: