Question

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

这是我的html：

finish()

在我的<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">  </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

}

我真的找不到这种行为的原因，因此，如果有人这样做，我将不胜感激。预先感谢。

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"

角度ngFor不显示更改的错误

2 个答案: