Angular 角度虚拟滚动未检测到为反应式队列添加项目的更改

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

{{state.name}
{{州首府}

下面是组件的设置：

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);
  }

}

从'@angular/core'导入{Component，OnInit}；
从'rxjs/BehaviorSubject'导入{BehaviorSubject}；
@组成部分({
选择器：“应用程序虚拟滚动”，
templateUrl:'./virtual scroll.component.html'，
样式URL:['./virtual scroll.component.css']
})
导出类VirtualScrollComponent{
国家=[
{名称：'阿拉巴马州'，首府：'蒙哥马利'}，
{名称：'阿拉斯加'，首都：'朱诺'}，
];
statesObservable=新行为主体（this.states）；
sortBy（道具：“姓名”|“大写”）{
//这样就可以创建一个新数组
this.statesObservable.next（this.states.map（s=>（{…s}））.sort（（a，b）=>{
常数aProp=a[prop]，bProp=b[prop]；
如果（aPropbProp）{
返回1；
}
返回0；
}));
}
附加项（）{
//这行不通
this.states.push（{名称：'怀俄明州'，首都：'夏延'}）；
this.statesObservable.next（this.states）；
}
}

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

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

我将这个问题追溯到core.js的内部，当我调用BehaviorSubject上的.next（）时，它似乎没有看到数组的变化

谢谢你的帮助--

更新

当然，在我发布这篇文章10分钟后（经过两天的搜索），我找到了（一半）我正在搜索的答案。看起来更改检测没有检测到这一点，因为我没有更改变量本身，只是添加到变量中。我明白。问题是，如何为现有的FormArray获取一个新变量——我必须重新创建整个过程吗？似乎有点过头了。

克隆它

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