angular 6 material 设计手风琴 openall

Question

我试图在我的 angular 应用程序中使用不同数据的两个手风琴组，就像我在下面提到的代码一样，但我不知道如何在我的应用程序中使用两个相同的组件。

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>

现在，如果我尝试单击 Expand All New 按钮，它必须为 2nd Accordion 执行 openAll 但它正在打开 1st Accordion 如何访问Angular Material设计中的特定手风琴？就像我有两个手风琴一样，我可以使用哪个参数访问特定的手风琴？

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 - Multiple accordion expand all

angular 6 material 设计手风琴 openall

angular 6 material design accordion openall

angular-material

angular

angular-material-6