javascript - Angular ngFor不显示更改的数组

Question

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

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

在我的 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;
  });

这是返回应该显示的小部件列表的方法:

    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" 根据组件逻辑具有值