Angular ngFor不显示更改的阵列

Question

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

这是我的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>

​

在我的ngOnInit中，我订阅了可观察到的内容：

this.dataService.currentDashboardId.subscribe(dashboardId => this.currentDashboardId = dashboardId);
this.dataService.currentSheetId.subscribe(sheetId => this.currentSheetId = sheetId);
this.dataService.projectData
  .subscribe((project: Project) => {
    this.project = project;

})；

下面是返回应该显示的list of widgets的方法：

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

}

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

Answer 1

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

*ngFor="let widget of widgetList()"

*ngFor="let widget of list"

在你的ngOnInit中：

this.list = this.widgetList()

这样，您就可以对其进行调试，并查看您的列表是否包含任何项。如果是这样的话，我会更深入地研究您的gridster-item组件，并根据组件逻辑确保[item]="widget.position"具有值

Answer 2

将数组存储在某个变量中，比如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;
}

并在html中使用ngfor，如下所示

*ngFor="let widget of widgetList"