我正在使用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()时,它看起来好像没有看到对数组的更改 .
任何帮助表示赞赏 -
UPDATE
当然,我发帖后10分钟(经过两天的搜索)我找到(一半)我正在寻找的答案 . 看起来变化检测并没有解决这个问题,因为我没有改变变量本身,只是添加它 . 据我所知 . 问题是,如何为现有的FormArray获取新变量 - 我是否必须重新创建整个事物?看起来像矫枉过正 .