angular - Angular Virtual Scroll 未检测到为 Reactive FormArray 添加项目的更改
问题描述
我正在使用 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
非常奇怪的是,如果您使用 map 函数重新创建数组,它会起作用,并且会出现新添加的项目。
我已经将问题追溯到 core.js 的核心,当我在 BehaviorSubject 上调用 .next() 时,它看起来好像没有看到数组的变化。
任何帮助表示赞赏 -
更新
当然,在我发布这篇文章 10 分钟后(经过两天的搜索),我找到了(一半)我正在寻找的答案。看起来更改检测没有发现这一点,因为我没有更改变量本身,只是添加了它。我明白。问题是,我如何为现有的 FormArray 获得一个新变量——我是否必须重新创建整个东西?好像有点矫枉过正。
解决方案
克隆它
this.FormArray = [...this.FormArray];
推荐阅读
- git - github远程中的github更改帐户
- javascript - 链接多个可观察对象并重用链中已执行的结果
- powershell - power shield 删除超过 6 个月的旧电子邮件
- javascript - 试图通过视图模型将表中的模型列表传递回控制器,但它总是为空?
- javascript - 在 div 内显示消息
- typescript - 如何将打字稿 T 限制为仅 camplex 对象
- php - 即使值存在,检查 PHP $_SESSION 中存在的值也会失败
- c# - 如何避免 Excel-DNA 加载项锁定外部库 dll?
- angular - Keydown 事件不适用于 Angular 中的选项
- html - 我的响应式导航栏不工作。我无法链接某些链接