как получить имя выбранной / активной панели расширения мата с помощью Typescript

Я использовал мат-расширительную панель. Динмически привязано имя заголовка панели. Когда пользователь щелкает элемент списка матов, я должен получить имя соответствующей панели, и мне нужно отобразить имя в каком-то другом div. Помогите мне получить в машинописном тексте имя активной / выбранной панели расширения матов.

<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>

typescript angular-material angular7
person Ashwini    schedule 21.12.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В вашем component.ts добавьте @ViewChild, чтобы получить ссылку на директиву MatAccordion. Затем получите развернутый MatExpansionPanelHeader, как показано ниже.

@ViewChild(MatAccordion) accordion: MatAccordion; 

...

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

ОБНОВЛЕНИЕ

Если единственной целью является отображение имени (заголовка) развернутого mat-expansion-panel в div, вы можете использовать обработчик событий afterExpand. Каждый раз, когда mat-expansion-panel раскрывается, вы сохраняете его заголовок в классе компонента (то есть в selectedTitle) и можете использовать это значение внутри своего div.

См. Следующий StackBlitz

person uminder    schedule 22.12.2019