ngFor中的Angular Material扩展面板API，如何自动关闭

Question

我最近在我的 Angular 项目中添加了 Angular Material 手风琴组件。在 API 中，他们使用为自动关闭面板提供的示例：https://material.angular.io/components/expansion/examples (opened) = panelStateOpen 并在组件中指定布尔值）

我这样做了，但是因为我正在循环通过menuItems 的信息，有两个组件，然后注入我的扩展面板，panelOpenState 不正确。

现在，我有

<mat-accordion *ngFor="let menuItem of menuItems">
  <confmenu menuItem={{menuItem}}></confmenu>
</mat-accordion>

在我的父模板和我的 confmenu（子模板）中：

<mat-expansion-panel (opened)="panelOpenState=true" (closed)="panelOpenState=false">
  <mat-expansion-panel-header>
    <mat-panel-title>
      {{menuItem}}
    </mat-panel-title>
    <mat-panel-description>
      {{menuDescription}}
    </mat-panel-description>
  </mat-expansion-panel-header>

  <mat-form-field>
    <mat-select (change)="selectConfig($event.value)">
      <mat-option *ngFor="let option of menuOptions" [value]="option" (click)="selectConfig(option)">
        {{option}}
      </mat-option>
    </mat-select>
  </mat-form-field>             
</mat-expansion-panel>

在我拥有的孩子的组件中 panelOpenState = false;

整个ts是

/** @title Basic menu */
@Component({
  selector: 'confmenu',
  templateUrl: './confmenu.component.html',
  styleUrls: ['./confmenu.component.scss']
})
export class ConfigurationMenu implements OnInit, OnDestroy {
  @Input() menuItem: string;
  panelOpenState = false;
  constructor() {}

  ngOnInit() { 
  }

  ngOnDestroy() {
    //blank for now
  }

  selectConfig(value:string){
    this.selectedConfig = value;
    this._menuService.changeSelectedConfig(this.selectedConfig);
    this._menuService.populateSelectedConfigConfigurations(this.selectedConfig);
  }
}

关于如何使面板在单击另一个面板时关闭的任何想法？现在，它们都在单击另一个时保持打开状态。

Answer 1

最简单的自动关闭与要在垫子扩展面板中表示的项目列表 - 是存储当前打开的面板项目的 ID。

component.html

<ng-container *ngFor="let item of items">
<mat-expansion-panel 
  [expanded]="item.id === currentOpenedItemId" 
  (opened)="handleOpened(item)"
>
</ng-container>

组件.ts

...
currentOpenedItemId: number;

public handleOpened(item): void { 
  this.currentOpenedItemId = item.id;
}

您也可以在获取数据时设置初始值 - 打开第一个面板

Answer 2

使用此示例 https://stackblitz.com/angular/olmedrdbamo?file=src%2Fapp%2Fexpansion-steps-example.ts 使用 *ngFor 索引作为“步骤”

<mat-accordion *ngFor="let menuItem of menuItems; let index = index">
                <confmenu menuItem={{menuItem}} [index]="index"></confmenu>
  </mat-accordion>

在组件中添加@Input() index: number;

你可以像这样调整样本

 <mat-expansion-panel [expanded]="step === index" (opened)="setStep(index)" hideToggle>