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

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

0 голосов
/ 23 октября 2018

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

}

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

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

сохранить массив в некоторой переменной, скажем, 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;
}

и использовать ngfor в html следующим образом 

*ngFor="let widget of widgetList"
0 голосов
/ 23 октября 2018

Вы пытались его отладить?Попробуйте изменить цикл foreach на список вместо функции 

*ngFor="let widget of widgetList()"

*ngFor="let widget of list"

и в вашем ngOnInit:

this.list = this.widgetList ()

таким образом вы можете отладить его и посмотреть, есть ли в вашем списке какие-либо элементы.Если это так, то я бы заглянул глубже в ваш компонент gridster-item и убедился, что [item]="widget.position" имеет значение в соответствии с логикой компонента

...