angular - 继续检测对从数组创建的可观察对象的更改
问题描述
我有两个组件,一个是父母,另一个是孩子。我正在使用@Input 将一个数组传递给子组件,并且每次更新数组时我都需要在子组件内运行一个函数。我确信它可以使用 observables 来完成,但无法弄清楚如何去做。我可以获得数组的初始值,但订阅似乎在一次更改后关闭。
这是 StackBlitz 演示的链接: https ://stackblitz.com/edit/angular-y8sren?file=app%2Fhello.component.ts
父组件.ts
arr: any[] = [
{ title: 'Test 1', value: 'Foo' },
{ title: 'Test 2', value: 'Bar' }
];
generateArray() {
const newArr = [];
for (let i = 1; i <= 20; i++) {
newArr.push({ title: 'Item '+ i, value: Math.floor(Math.random() * 123) });
}
this.arr = newArr;
}
child.component.ts
@Input() arr: any[];
obsArr$: Observable<any[]>;
finalArr: any[] = [];
ngOnInit() {
this.obsArr$ = Observable.from(this.arr);
this.obsArr$
.concatMap(val => Observable.of(val))
.toArray()
.subscribe(data => {
// This needs to be run everytime arr changes to keep data in sync
// But this gets run only once
this.finalArr = data;
},
console.error
);
}
解决方案
无需使用 Observables。只需使用ngOnChanges
( Docs ),当指令的任何数据绑定属性更改时调用它。
只需导入它import { OnChanges } from '@angular/core';
并像这样使用它OnInit
:
ngOnChanges() {
// do what you want with the ()Input prop whenever the parent modifies it
}
推荐阅读
- python - Django过滤大型数据集花费太长时间
- javascript - 如何使用 JavaScript 计算 div 类的出现次数,并在没有 jQuery 的情况下将数字打印到屏幕上?
- java - 比较超过 3 个 HashMap 的 Key
- python - root = tkinter.Tk() 还是 root = Tk()?
- grafana - Grafana Table 下一个/上一个/每页可能的数量?
- javascript - Vue.Draggable 不同的行为取决于放置位置
- reactjs - 这个 React 语法是什么:inputRef?.current?.current
- qt - 来自互联网的ini文件的QSettings
- mysql - 如何使用 typeORM 在 Nestjs 中创建类型为 Date 的列并键入 DateTime?
- javascript - VueJS - 变量已定义但从未使用(向 Firebase 发送数据)