Angular ng для отображения измененного массива

Question

В моем приложении есть панель инструментов, где пользователь может добавлять и удалять виджеты. Для этого я использую 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;

}

Я действительно не могу найти причину такого поведения, поэтому, если кто-то и делает, я ценю это. Заранее спасибо.

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

Сохранить массив в некоторой переменной, скажем, виджет List

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 в HTML, как это

*ngFor="let widget of widgetList"