Как запустить событие в Angular только при открытой панели расширения

Question

Я пытаюсь уменьшить количество отправляемых сетевых запросов, изменяя событие, которое их запускает.Я хочу, чтобы запрос fetchAvailableCompanies http запускался только при открытой панели расширения, а не при закрытой панели.

Вот мой html-компонент:

 <mat-accordion *ngIf="modules">
    <mat-expansion-panel *ngFor="let module of modules">
      <mat-expansion-panel-header (click)="fetchAvailableCompanies(module.module_name)">
        <mat-panel-title>
          {{module.module_name}}
        </mat-panel-title>
      </mat-expansion-panel-header>
      <div *ngFor="let company of availableCompanies[module.module_name]">
        <mat-checkbox>{{company.name}}</mat-checkbox>
      </div>
    </mat-expansion-panel>
  </mat-accordion>

Вместо того, чтобы использовать по щелчку, может быть, мне лучше открыть / развернуть и закрыть / свернуть?Не уверен, как это реализовать, хотя.Также я планирую реализовать кэширование http-ответов с помощью Http-перехватчиков.Влияет ли это на то, как я должен подходить к этой проблеме?

Любая помощь будет признательна, спасибо:)

Answer 1

Существует событие afterExpand для mat-expansion-panel (не заголовок):

<mat-expansion-panel *ngFor="let module of modules" (afterExpand)="fetchAvailableCompanies(module.module_name)">
    <mat-expansion-panel-header>