Angular 角度材质展开面板：如何开始展开，然后让用户随意展开/折叠

我有一个包含数据列表的扩展面板。加载构件时，我希望面板在其数据长度为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>

带数据项
{{data.name}
添加数据

所需结果：如果

item.data.length

为0，则展开面板最初展开，如果

item.data.length

大于0，则展开面板最初折叠。然后，如果用户单击添加数据按钮，扩展面板将保持打开状态

实际结果：如果

item.data.length

为0，则展开面板最初展开，如果大于0，则展开面板折叠。但如果用户单击“添加数据”，则

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

下面是一个行为的例子

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

尝试更改此选项：

致：

尝试更改此选项：

致：

---

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

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

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

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

编辑：搞乱了链接

---

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

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

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

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

编辑：搞乱了链接

---

这不起作用，因为他希望在开始时数据不为空时关闭面板。这不起作用，因为他希望在开始时数据不为空时关闭面板。