异步设置时，mat-expansion-panel [expanded] 输入无法正常工作

Question

我有一个 mat-accordion，它有一个 mat-expansion-panel 设置如下：

<mat-expansion-panel *ngFor="let item of menuItems; index as i" [hideToggle]="item.hideToggle" [expanded]="item.active">

如果“item”的布尔属性“active”评估为 true，则可以看到“expanded”输入为 true。好吧，这是奇怪的部分：如果同步设置“item.active”，例如在我的组件的 ngOnInit 方法上，则一切正常并且面板打开。但是，如果“item.active”被异步设置，例如在可观察的“订阅”方法内，则面板不会打开。为什么会发生这种情况？我该如何解决？

先感谢您， 托马斯

Answer 1

我遇到了类似的问题，我异步加载扩展面板的内容。该问题是由于当内容通过返回对象作为标识的默认 trackByFunction 实现发生更改时，ngFor 指令重新渲染 DOM 引起的。请参阅此处。

来解决这个问题

identify(index:number, item:any){
    return item.ExternalId;   // this is the unique id 
}

我通过提供自定义 trackBy 函数然后在模板中调用它

<div *ngFor="let item of items;trackBy:identify">