Angular Virtual Scroll 未检测到为 Reactive FormArray 添加项目的更改

Question

我正在使用 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);
  }

}

我已经针对该问题创建了一个 stackblitz（基于我发现的现有 stackblitz）：

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

非常奇怪的是，如果您使用 map 函数重新创建数组，它会起作用，并且会出现新添加的项目。

我已经将问题追溯到 core.js 的内部，当我在 BehaviorSubject 上调用 .next() 时，它看起来好像没有看到数组的变化。

感谢任何帮助 --

更新

当然，我 post 10 分钟后（经过两天的搜索）我找到了（一半）我正在搜索的答案。看起来变化检测没有发现这个，因为我没有改变变量本身，只是添加它。我明白了。问题是，如何为现有的 FormArray 获取新变量——我是否必须重新创建整个变量？好像矫枉过正了。

Answer 1

克隆它

  this.FormArray = [...this.FormArray];

Angular Virtual Scroll 未检测到为 Reactive FormArray 添加项目的更改

Angular Virtual Scroll Not Detecting Changes to Add Items for Reactive FormArray

angular-material2

angular

angular-cdk

angular7