angular-cli:从ts文件打开/关闭MatExpansionPanel

Question

我有一个angular-cli组件，它包含多个mat-expansion-panel (https://material.angular.io/components/expansion/overview)。

我需要从ts文件打开/关闭扩展面板，我不确定如何访问各个扩展面板上的属性。我得到了错误

ERROR TypeError: Cannot read property 'open' of undefined

我正在尝试访问此元素

<mat-expansion-panel #first="matExpansionPanel">

使用

first: MatExpansionPanel;
...
this.first.open();

这是我的ts

import { Component, OnInit } from '@angular/core';
import { Category } from '@app/model/Enums';
import { ActivatedRoute } from '@angular/router';    
import { MatExpansionPanel } from '@angular/material';

@Component({
  selector: 'app-some-component',
  templateUrl: './some-component.component.html',
  styleUrls: ['./some-component.component.scss']
})

export class SomeComponent implements OnInit {

  sub: any;
  first: MatExpansionPanel; 
  second: MatExpansionPanel; 

  constructor(private activateRoute: ActivatedRoute) {
    this.sub = this.activateRoute.params.subscribe(params => {

      // Open the MatExpansionPanel with id "first"
      this.first.open();

      // Open the MatExpansionPanel with id "second"
      this.second.open();
  }

  ngOnInit() {
  }

}

这是我的HTML

<mat-accordion>
    <mat-expansion-panel #first="matExpansionPanel">
        <mat-expansion-panel-header>
            <mat-panel-title>
                Title 1
            </mat-panel-title>
            <mat-panel-description>
            </mat-panel-description>
        </mat-expansion-panel-header>
        <p>Content</p>
    </mat-expansion-panel>
</mat-accordion>
<br />
<mat-accordion>
    <mat-expansion-panel #second="matExpansionPanel">
        <mat-expansion-panel-header>
            <mat-panel-title>
                Title 2
            </mat-panel-title>
            <mat-panel-description>
            </mat-panel-description>
        </mat-expansion-panel-header>
        <p>Content</p>
    </mat-expansion-panel>
</mat-accordion>

你知道该怎么做吗？

Answer 1

首先，你必须用@ViewChild实例化你的扩展面板。

@ViewChild('first', {static: true, read: MatExpansionPanel}) first: MatExpansionPanel;

然后，如果您想要执行“打开”功能，则只能在ngAfterViewInit函数中设置页面后才能执行此操作。

ngAfterViewInit() {
  this.first.open();
}