这个问题可能是由于在操作数组时不正确地使用了immutable的对象。为了解决这个问题,我们可以采用以下方法:
假设有以下的数据
const data = [
{
id: 1,
name: 'John',
age: 30,
address: {
city: 'New York'
}
},
{
id: 2,
name: 'Bob',
age: 25,
address: {
city: 'San Francisco'
}
}
];
首先,我们需要创建一个BehaviorSubject对象以便在数据更改时通知UI.
import { BehaviorSubject } from 'rxjs';
private dataSubject = new BehaviorSubject(data);
然后,我们需要在更改数据时遵循不可变对象的模式. 我们可以使用Object.assign
和Spread Operator (...)来创建新的对象并覆盖更改的属性.
const newData = data.map(item => {
if (item.id === id) {
return Object.assign({}, item, {name: newName});
}
return item;
});
this.dataSubject.next(newData);
最后,在UI组件中我们需要使用async pipe
and ngFor
指令.
data$ = this.service.data$;
{{item.id}} - {{item.name}} - {{item.age}} - {{item.address.city}}
这应该就能解决BehaviorSubject修改数组对象中的一个属性不反映在UI的问题。