可以使用RxJS的map操作符和Object.assign函数来更改Observable中对象的特定值。首先,订阅Observable并使用map操作符将更改应用于Observable中的对象。然后使用Object.assign函数将更改应用于对象本身。
下面是一个示例:
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators';
interface User {
id: number;
name: string;
age: number;
}
@Component({
selector: 'app-root',
template: `
Users
-
{{ user.name }}, {{ user.age }}
`,
})
export class AppComponent {
users$: Observable = getUsers();
updateUser(user: User) {
// 使用map操作符将更改应用于Observable中的对象
const updatedUsers$ = this.users$.pipe(
map((users: User[]) => {
const targetUser: User = users.find(u => u.id === user.id);
return targetUser ? [
...users.filter(u => u.id !== user.id),
Object.assign({}, targetUser, { age: targetUser.age + 1 }),
] : users;
}),
);
// 将更改应用于对象本身
updatedUsers$.subscribe((users: User[]) => this.users$ = of(users));
}
}
function getUsers(): Observable {
const users: User[] = [
{ id: 1, name: 'Alice', age: 21 },
{ id: 2, name: 'Bob', age: 25 },
{ id: 3, name: 'Charlie', age: 30 },
];
// 将users数组转换为可观察对象
return of(users);
}
在此示例中,我们获取用户数据,然后在用户的“Update Age”按钮单击时通过调用updateUser()
函数更新用户