Angular Material 扩展面板：最初如何扩展，然后让用户随意扩展/折叠答案

【问题标题】：Angular Material Expansion Panels: How to expand initially, but then let the user expand/collapse as they pleaseAngular Material 扩展面板：最初如何扩展，然后让用户随意扩展/折叠
【发布时间】：2019-04-05 17:20:53
【问题描述】：

我有一个包含数据列表的扩展面板。当组件加载时，如果它的数据长度为0，我希望面板展开，如果它的数据长度大于0，我希望面板折叠。

初始化后，我希望面板仅在用户单击它时展开或折叠。因此，如果面板数据的长度从 0 变为 1，我不希望面板随后折叠，我希望它保持打开状态。问题是当我使用展开面板的[展开]输入时，它会不断检查条件，所以当数据长度发生变化时，即使用户没有点击它也会展开或折叠。

<mat-expansion-panel [expanded]="!item.data.length">
  <mat-expansion-panel-header>
    <mat-panel-title>
      Item with data
    </mat-panel-title>
  </mat-expansion-panel-header>
  <div *ngFor="let data of item.data">
    {{data.name}}
  </div>
  <button (click)="addDataToItem()">ADD DATA</button>
</mat-expansion-panel>

期望的结果：如果item.data.length 为0，展开面板初始展开，如果item.data.length 大于0，展开面板初始折叠。然后，如果用户单击添加数据按钮，展开面板保持打开状态。

实际结果：如果item.data.length为0，展开面板初始展开，大于0则折叠。但如果用户点击ADD DATA，则

面板关闭，因为长度大于 0。

这是一个example 的行为。

请注意面板最初是如何展开的，因为长度为 0，但是当您单击添加数据时，它会折叠，因为长度为 1。我希望它保持打开状态。

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

您可以在组件中创建一个布尔值并将其设置为 item.data.length === 0，然后在模板中进行检查。

public expanded: boolean = this.item.data.length === 0;

<mat-expansion-panel [expanded]="expanded">

编辑：弄乱了链接

https://angular-esfqzh.stackblitz.io

【讨论】：

【解决方案2】：

尝试改变这个：

<mat-expansion-panel [expanded]="!item.data.length">

到：

<mat-expansion-panel [expanded]="item.data.length">

【讨论】：

这行不通，因为如果数据一开始不为空，他希望面板关闭。