1

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

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

}

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

4

2 回答 2

1

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

*ngFor="let widget of widgetList()"

*ngFor="let widget of list"

在你的 ngOnInit 中：

this.list = this.widgetList()

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

于 2018-10-23T06:54:54.290 回答
0

将数组存储在某个变量中，比如说 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"
于 2018-10-23T07:32:10.103 回答