angular-cli: открыть / закрыть панель MatExpansionPs из файла ts

Question

У меня есть компонент angular-cli, который содержит несколько панелей расширения матов (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();
}