Угловая виртуальная прокрутка не обнаруживает изменения в элементах товаров для реактивного FormArray - PullRequest
Новая
       40

Угловая виртуальная прокрутка не обнаруживает изменения в элементах товаров для реактивного FormArray

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

Я работаю с новым элементом управления в Angular 7 и не могу заставить его признать, что я добавил новый элемент в отображаемый массив.

Вот мой html: 

<cdk-virtual-scroll-viewport class="list-container lg" [itemSize]="52.5">
    <div *cdkVirtualFor="let state of statesObservable | async;" class="list-group-item">
        <div class="state">{{state.name}}</div>
        <div class="capital">{{state.capital}}</div>
    </div>
</cdk-virtual-scroll-viewport>

, а вот настройка для компонента: 

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Component({
  selector: 'app-virtual-scroll',
  templateUrl: './virtual-scroll.component.html',
  styleUrls: ['./virtual-scroll.component.css']
})
export class VirtualScrollComponent {

  states = [
    { name: 'Alabama', capital: 'Montgomery' },
    { name: 'Alaska', capital: 'Juneau' },
  ];
  statesObservable = new BehaviorSubject(this.states);

  sortBy(prop: 'name' | 'capital') {

    // this works -- creates a new array
    this.statesObservable.next(this.states.map(s => ({ ...s })).sort((a, b) => {
      const aProp = a[prop], bProp = b[prop];
      if (aProp < bProp) {
        return -1;
      } else if (aProp > bProp) {
        return 1;
      }
      return 0;
    }));
  }

  addItem() {
    // this does not work
    this.states.push({ name: 'Wyoming', capital: 'Cheyenne' });
    this.statesObservable.next(this.states);
  }

}

Я создал стекаблиц проблемы (на основесуществующий стек, который я нашел):

https://stackblitz.com/edit/angular-material-wlrjys

Очень странно то, что если вы воссоздаете массив с помощью функции карты, он работает, и появляются новые добавленные элементы.

Я отследил проблему до глубины ядра core.js, и похоже, что он не видит изменений в массиве, когда я вызываю .next () для объекта BehaviorSubject.

ЛюбойПомощь приветствуется -

ОБНОВЛЕНИЕ

Конечно, через 10 минут после публикации (после двух дней поиска) я нахожу (половину) ответ, который ищу.Похоже, что обнаружение изменений не подхватывает это, потому что я не изменяю саму переменную, а просто добавляю к ней.Что я понимаю.Вопрос в том, как я могу получить новую переменную для существующего массива FormArray - мне нужно воссоздать всю вещь?Похоже на излишество.

...