угловой 6 материал дизайн гармошка openall - PullRequest
Новая
       6

угловой 6 материал дизайн гармошка openall

0 голосов
/ 04 сентября 2018

Я пытался создать в моем угловом приложении две группы аккордеонов с разными данными, такими как код, который я упомянул ниже, но я не знаю, как использовать два одинаковых компонента в моем приложении. 

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? Например, если у меня есть два аккордеона, с каким параметром я могу получить доступ к определенным аккордеонам?

Ответы [ 2 ]

0 голосов
/ 09 октября 2018

Вы можете сделать несколько небольших изменений, чтобы заставить это работать.

Изменение: 

@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 - несколько аккордеонов, развернуть все

0 голосов
/ 04 сентября 2018

Попробуйте свойство expanded

[expanded]="true"

Для всех панелей расширения

Ссылка ---> https://material.angular.io/components/expansion/examples

...