时间戳

首页 > 解决方案 > 如何使用 Typescript 获取选定/活动的垫子扩展面板名称

typescript - 如何使用 Typescript 获取选定/活动的垫子扩展面板名称

问题描述

我使用了垫扩展面板。动态绑定面板标题名称。当用户单击 mat-list 项时，我必须获取相应的面板名称，并且我需要在其他一些 div 中显示名称。帮助我在 typescript 中获取活动/选定的 mat-expansion-panel 名称。

<mat-accordion>
    <mat-expansion-panel *ngFor="let templateList of LeftpaneTableDetails first as isFirst" [expanded]="isFirst">
        <mat-expansion-panel-header>
            <mat-panel-title>
                {{templateList.strTemplateName}}
            </mat-panel-title>
            <mat-panel-description>
            </mat-panel-description>
        </mat-expansion-panel-header>
        <mat-list>
            <mat-list-item class="cursor-pointer table-name-list" *ngFor="let table of templateList.tableList" [attr.data-message-tableId]="table.intTableId" (click)="populateTableDetails($event, table.intTableId, table.strTableLabelName, templateList.strTemplateName)">{{table.strTableLabelName}}</mat-list-item>
        </mat-list>
    </mat-expansion-panel>
</mat-accordion>

标签： typescriptangular-materialangular7

解决方案

在您的 component.ts 中，添加@ViewChild以获取对MatAccordion指令的引用。然后检索展开MatExpansionPanelHeader，如下所示。

@ViewChild(MatAccordion) accordion: MatAccordion; 

...

getExpandedPanelHeader(): MatExpansionPanelHeader {
    return this.accordion._headers.find(h => h._isExpanded());
}

更新

如果唯一的目的是在mat-expansion-panela中显示展开的名称（标题），则div可以使用afterExpand事件处理程序。每次mat-expansion-panel扩展 a 时，您都将其标题存储在组件类中（即在 中selectedTitle），并且可以在您的div.

请参阅以下StackBlitz

推荐阅读