Angular扩展面板无法打开

Question

Angular扩展面板无法打开

3

嘿，大家能帮我吗？我尝试了很多次但不知道为什么它不起作用...发生的情况是，当我以编程方式打开扩展面板时，有时会打开，有时则不会。当我按Ctrl + Shift + R时，它可以正常工作。但当我关闭面板并再次导航到该组件时，它就无法工作了。但切换显示其已展开（您可以在红色高亮中看到）。我所做的是，当扩展面板具有数据时，将ingredientsExpansion设置为true。请参见下面的图像输入图像描述

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

}

``` 但是面板在将其设置为true后没有打开。

请参见下面的图片 enter image description here enter image description here ```

- Manu

创建可复现的示例 - undefined

请提供更多关于这个问题的细节。 - undefined

请查看此链接：https://material.angular.io/components/expansion/overview，其中提供了一个带有完整代码的实时示例。在使用之前，您必须先安装 Angular Material。 - user12504785

@frost 你能看到我上传的图片吗？展开属性已设置为true，但它仍然没有打开。 - undefined

请提供代码以供我们检查……仅凭图像无法帮助您。问题肯定不在 Angular 组件上，而是其他地方。请注意，原始问题的提问者可能会将此工单标记为“研究不足”。 - undefined

@Manu 如果你不能提供真实的项目代码，请尝试为你的组件创建一个虚拟项目，其中包含你的经验面板。我们需要了解你的 .ts 文件以便更多地了解它。 - user12504785

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user12504785 · Answer 1

.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。我猜只设置这个布尔值就足够了。