Clr-accrodion 无法按预期使用 ngFor

Question

我一直在尝试在 angular 10 项目中找到基于 clarity v5 框架的手风琴解决方案，但没有成功。我遇到的问题是：

在component.ts中：

info = [{name: '1'}, {name: '2'}];

getInfo(): any[] {
 return [{name: '1'}, {name: '2'}];
}

在component.html中：

第一个

<clr-accordion>
    <clr-accordion-panel  *ngFor="let i of getInfo()">
        <clr-accordion-title>Item {{i.name}}</clr-accordion-title>
        <clr-accordion-content *clrIfExpanded>Content 1</clr-accordion-content>
    </clr-accordion-panel>
</clr-accordion>

第二

<clr-accordion>
    <clr-accordion-panel  *ngFor="let i of info">
        <clr-accordion-title>Item {{i.name}}</clr-accordion-title>
        <clr-accordion-content *clrIfExpanded>Content 1</clr-accordion-content>
    </clr-accordion-panel>
</clr-accordion>

第二个按预期工作。然而，第一个虽然它显示了点击的项目，但它没有打开手风琴。有什么想法吗？

Answer 1

在第一个示例中，每次更改检测迭代都会创建新数组。因此，您单击的项目不再存在，取而代之的是创建新元素，该元素未打开。要修复它，您可以提供 trackBy 函数 *ngFor="let i of info; trackBy: trackByName" trackBy(i, obj){return obj.name}，因此 angular 会将旧元素与新元素相关联，但在我看来，将数组保存为字段是更好的解决方案这里。

Clr-accrodion 无法按预期使用 ngFor

Clr-accrodion not working as expected with ngFor

clarity

angular