角扩展面板未打开

问题描述

嘿，有人可以帮我吗，我尝试了很多，但是不知道为什么它不起作用...。 发生的是，当我以编程方式打开扩展面板时，它有时是打开的，有时不是。 当我做一个ctrl + shift + R然后它的工作正常。但是当我关闭面板并再次导航到该组件时，它不起作用。但切换开关显示其已消耗电量（您可以看到红色突出显示的内容）

See image below enter image description here

我正在做的是当扩展面板上有数据时，然后将IngredientsExpansion设置为true。

 headPanletoggle(){
this.ingredientsExpansion=true; //head panel Toggle

}

但看到真假后面板没有打开

请参见下图enter image description here

enter image description here

解决方法

.html：

<mat-accordion>
  <mat-expansion-panel hideToggle>
    <mat-expansion-panel-header>
      <mat-panel-title>
        This is the expansion title
      </mat-panel-title>
      <mat-panel-description>
        This is a summary of the content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is the primary content of the panel.</p>
  </mat-expansion-panel>
  <mat-expansion-panel (opened)="panelOpenState = true"
                       (closed)="panelOpenState = false">
    <mat-expansion-panel-header>
      <mat-panel-title>
        Self aware panel
      </mat-panel-title>
      <mat-panel-description>
        Currently I am {{panelOpenState ? 'open' : 'closed'}}
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>I'm visible because I am open</p>
  </mat-expansion-panel>
</mat-accordion>

.ts：

import {Component} from '@angular/core';

/**
 * @title Basic expansion panel
 */
@Component({
  selector: 'expansion-overview-example',templateUrl: 'expansion-overview-example.html',styleUrls: ['expansion-overview-example.css'],})
export class ExpansionOverviewExample {
  panelOpenState = false;
}

.css：

.mat-form-field + .mat-form-field {
  margin-left: 8px;
}

看到了吗？我不需要按功能进行打开/关闭。

但是如果您必须-在我的.ts中看到该行

  panelOpenState = false;

只需根据您的函数将其设置为true或false。我想只设置这个布尔值就足够了