angular 6 Material 设计 Accordion openall

Question

我尝试在我的 Angular 应用程序中使用两个具有不同数据的 Accordion 组，就像我在下面提到的代码一样，但我不知道如何在我的应用程序中使用两个相同的组件。

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 Design 中的特定 Accordion ？就像我有两个 Accordion 一样，我可以使用哪个参数访问特定的 Accordion ？

Answer 1

您可以进行一些小的更改以使其正常工作。

改变:

@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 中，将以下内容添加到两个 Accordion 中:

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

并将按钮更改为新功能:

(click)="openAllFirst()"

我已将您上面的代码复制到 Stackblitz 中，并进行了这些更改。

Stackblitz - Multiple accordion expand all