Question

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

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

<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，则最初折叠为展开面板。然后，如果用户单击ADD DATA按钮，扩展面板保持打开状态。

实际结果：：如果item.data.length为0，则展开面板首先展开，如果大于0，则展开面板。但是，如果用户单击ADD DATA，则

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

这是行为的example。

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

Answer 1

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

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

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

编辑：弄乱了链接

https://angular-esfqzh.stackblitz.io

Answer 2

尝试更改此内容：

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

至：

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

角材料扩展面板：如何先扩展，然后让用户随意扩展/折叠

2 个答案: