Javascript 用于不显示已更改的阵列的角度

在我的应用程序中，我有一个仪表板，用户可以在其中添加和删除小部件。为此，我使用angular-gridster2。这很好，但当我从仪表板添加或删除小部件时，首先不再显示任何小部件，然后只有在刷新后才会发生正确的更改。我的NgfordRective正在迭代的小部件列表是从一个可观察对象构建的。这些值会正确更改

这是我的html：

<gridster #dashboardgrid [options]="options" class="widget-container">
    <gridster-item *ngFor="let widget of widgetList()" (mouseup)="setCurrentWidgetId(widget.id)" [item]="widget.position" class="gridster-design drag-handler">
      <!-- some stuff-->
    </gridster-item>

}))

这是返回小部件列表的方法，其中应显示：

widgetList(): Array<Widget> {
return this.project.dashboards
  .find(x => x.id === this.currentDashboardId).sheets
  .find(x => x.id === this.currentSheetId).widgets;

widgetList（）：数组{
返回此.project.dashboards
.find（x=>x.id==this.currentDashboardId）.sheets
.find（x=>x.id==this.currentSheetId）.widgets；

}

我真的找不到这种行为的原因，所以如果有人这样做，我很感激。提前谢谢。

您试过调试它吗？ 尝试将foreach循环更改为列表，而不是函数

*ngFor="let widget of widgetList()"

*ngFor="let widget of list"

在你的ngOnInit中：

this.list=this.widgetList（）

通过这种方式，您可以调试它并查看列表是否包含任何项。如果是这样的话，那么我将深入研究gridster项组件，并确保

---

[item]=“widget.position”

根据组件逻辑具有值

将数组存储在某个变量中，比如widgetList

widgetList : any;
widgetList(): Array<Widget> {
return this.widgetList = this.project.dashboards
  .find(x => x.id === this.currentDashboardId).sheets
  .find(x => x.id === this.currentSheetId).widgets;
}

---

您可以尝试使用自定义trackby函数，是否尝试过？将widgetList（）放在ngOnInit（）下，将返回值存储到列表中，并将该列表与*ngFor一起使用。通过这种方式，您只需迭代函数的返回值，这就是为什么它不反映更新。

widgetList : any;
widgetList(): Array<Widget> {
return this.widgetList = this.project.dashboards
  .find(x => x.id === this.currentDashboardId).sheets
  .find(x => x.id === this.currentSheetId).widgets;
}

*ngFor="let widget of widgetList"