角6材料設計手風琴openall

Question

我試圖在我的角度應用程序中使用兩個具有不同數據的手風琴組，例如下面提到的代碼，但是我不知道如何在我的應用程序中使用兩個相同的組件。

 import { OnInit } from '@angular/core'; import { Component, ViewChild, ViewEncapsulation} from '@angular/core'; import {MatAccordion} from '@angular/material'; @Component({ selector: 'app-demo-accordion', templateUrl: './demo-accordion.component.html', styleUrls: ['./demo-accordion.component.css'] }) export class DemoAccordionComponent implements OnInit { constructor() { } ngOnInit() { } @ViewChild(MatAccordion) accordion: MatAccordion; @ViewChild(MatAccordion) testing: MatAccordion; displayMode: string = 'default'; displayMode1: string = 'default'; multi = true; hideToggle = false; hideToggle1 = false; disabled = false; showPanel3 = true; panel11 = false; expandedHeight: string; collapsedHeight: string; } 

 <h1>matAccordion</h1> <div> <p>Accordion Options</p> <p>Accordion Actions <sup>('Multi Expansion' mode only)</sup></p> <div> <button mat-button (click)="accordion.openAll()" >Expand All</button> <button mat-button (click)="accordion.closeAll()" >Collapse All</button> </div> <p>Accordion Panel(s)</p> </div> <br> <mat-accordion [displayMode]="displayMode" [multi]="multi" id="newcha" class="mat-expansion-demo-width"> <mat-expansion-panel #panel1 [hideToggle]="hideToggle"> <mat-expansion-panel-header>Section 1</mat-expansion-panel-header> <p>This is the content text that makes sense here.</p> </mat-expansion-panel> <mat-expansion-panel #panel2 [hideToggle]="hideToggle" [disabled]="disabled"> <mat-expansion-panel-header>Section 2</mat-expansion-panel-header> <p>This is the content text that makes sense here.</p> </mat-expansion-panel> </mat-accordion> <br> <hr> <div> <mat-accordion [displayMode]="displayMode1" [multi]="multi" id="testing" class="mat-expansion-demo-width"> <mat-expansion-panel #panel11 [hideToggle]="hideToggle1"> <mat-expansion-panel-header>Section 12</mat-expansion-panel-header> <p>This is the content text that makes sense here.</p> </mat-expansion-panel> <mat-expansion-panel #panel11 [hideToggle]="hideToggle1" [disabled]="disabled"> <mat-expansion-panel-header>Section 13</mat-expansion-panel-header> <p>This is the content text that makes sense here.</p> </mat-expansion-panel> </mat-accordion> </div> <div> <button mat-button (click)="testing.openAll()" >Expand All New</button> <button mat-button (click)="testing.closeAll()" >Collapse All New</button> </div> 

現在，如果我嘗試單擊“展開所有新按鈕”，則必須為第二手風琴執行openAll，但它正在打開第一手風琴。如何在Angular Material Design中訪問特定的手風琴？ 就像我有兩個手風琴一樣，我可以使用哪個參數訪問特定的手風琴？

Answer 1

嘗試expanded屬性

[expanded]="true"

對於所有擴展面板

參考---> https://material.angular.io/components/expansion/examples

Answer 2

您可以進行一些小的更改以使此功能生效。

更改：

@ViewChild(MatAccordion) accordion: MatAccordion;
@ViewChild(MatAccordion) testing: MatAccordion;

至：

@ViewChild('firstAccordion') firstAccordion: MatAccordion;
@ViewChild('secondAccordion') secondAccordion: MatAccordion;

添加一些功能：

openAllFirst() {
    this.firstAccordion.openAll();
}
closeAllFirst() {
    this.firstAccordion.closeAll();
}
openAllSecond() {
    this.secondAccordion.openAll();
}
closeAllSecond() {
    this.secondAccordion.closeAll();
}

在HTML中，將以下內容添加到兩個手風琴中：

<mat-accordion ....  #firstAccordion="matAccordion">
<mat-accordion ....  #secondAccordion="matAccordion">

並將按鈕更改為新功能：

(click)="openAllFirst()"

我已將您的代碼復制到Stackblitz中，並進行了更改。

Stackblitz-多個手風琴全部展開