以编程方式打开扩展面板,无需单击

时间:2020-09-02 12:32:13

标签: angular angular-material expansion

有什么方法可以触发openAll方法...以便我可以以编程方式打开所有面板... 使用openAll方法... 我尝试制作一个函数,然后在ngOnint中调用该函数,然后抛出一些错误

错误 错误:无法读取未定义的属性'openAll'

请帮助

enter image description here

HTML

    <mat-accordion class="example-headers-align" multi>
<!-- #enddocregion multi -->
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>
        Personal data
      </mat-panel-title>
    </mat-expansion-panel-header>

    <mat-form-field>
      <mat-label>Age</mat-label>
      <input matInput type="number" min="1">
    </mat-form-field>

  </mat-expansion-panel>
<!-- #docregion disabled -->
  <mat-expansion-panel>
<!-- #enddocregion disabled -->
    <mat-expansion-panel-header>
      <mat-panel-title>
        Destination
      </mat-panel-title>
    </mat-expansion-panel-header>

    <mat-form-field>
      <mat-label>Country</mat-label>
      <input matInput>
    </mat-form-field>
  </mat-expansion-panel>
</mat-accordion>

.ts文件

import {Component, ViewChild, OnInit, ElementRef, AfterViewInit, AfterContentInit, AfterContentChecked} from '@angular/core';
import {MatAccordion} from '@angular/material/expansion';

/**
 * @title Accordion with expand/collapse all toggles
 */
@Component({
  selector: 'expansion-expand-collapse-all-example',
  templateUrl: 'expansion-expand-collapse-all-example.html',
  styleUrls: ['expansion-expand-collapse-all-example.css'],
})
export class ExpansionExpandCollapseAllExample implements OnInit{
  @ViewChild(MatAccordion) accordion: MatAccordion;

  ngOnInit(){
   this.openPanel()
  }
 openPanel(){
    this.accordion.openAll()
 }
}

请参见下图

0 个答案:

没有答案