Angular 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

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

改变：

@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 - 多个手风琴展开全部