web-dev-qa-db-ja.com

Angular Material accordionで最初に接続された拡張パネルを開きます

明らかに、入力時にexpandedをAngularマテリアル拡張パネルで使用して、ロード時に特定のパネルをデフォルトで開くことができます。ただし、すべての拡張パネルにはアコーディオンがあります動的に生成され、すべてはオプションですが、最初のパネルを開きたいです。

テンプレートを使用してパネルを生成する各ngForsを調べてパネルが存在するかどうかを確認し、最初のインデックスに属性を追加しますが、テンプレートを取り込むループがいくつかあり、面倒です。ビューが完了した後にmat-accordionからいくつかのプロパティを取得して、アコーディオンに最初にアタッチされたものを確認し、属性を追加できるようにしたいと思いますが、不可能なようです。これを行う方法があるかどうか誰でも知っていますか？

javascripthtmlangularangular-materialaccordion
9
Aaron Hazelton

first変数を使用できます。stackblitzを作成しました。 here を確認できます。

次のようにできます：

<mat-accordion class="example-headers-align">
  <mat-expansion-panel *ngFor="let item of [1,2,3]; first as isFirst" [expanded]="isFirst">
    <mat-expansion-panel-header>
      <mat-panel-title> {{item}} </mat-panel-title>
    </mat-expansion-panel-header>
    {{item}}
  </mat-expansion-panel>
</mat-accordion>

here の使用を見ることができます*ngFor詳細については変数。

12
Kalamarico

NgFor "first"ローカル変数を使用してみましたか？この方法では：

<mat-accordion>
    <mat-expansion-panel *ngFor="let elem of elements; let isFirst = first" [expanded]="isFirst">
         <!--- Something Here --->
    </mat-expansion-panel>
</mat-accordion>
5
DLM