Angular – 主题数组中的 edit/remove 元素
Angular – edit/remove element in a Subject Array
我有一个用户数组的主题
private _currentHeroes = new Subject<Hero[]>();
currentHeroes = this._currentHeroes.asObservable();
- 我的目标是只编辑数组的 1 个元素而不订阅
在我的服务中给用户加电的功能
powerUp(id: number) {
return this.http
.post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
.pipe(
tap((updatedHero: Hero) => {
this._currentHeroes.next(
// I would like to edit the specific element in the array and than sort them by the power.
);
})
);
}
我的服务删除用户的功能
delete(id: number) {
return this.http.delete<Hero>(environment.apiUrl + 'heroes/' + id).pipe(
tap((deletedHero) => {
this._currentHeroes.next(
// Here I delete the specific element from the array
);
})
);
}
如果主题是 BehaviorSubject 那么我会这样做:
powerUp(id: number) {
return this.http
.post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
.pipe(
tap((updatedHero: Hero) => {
this._currentHeroes.next(
this._currentHeroes.value
.map((hero: Hero) =>
hero.id === updatedHero.id ? updatedHero : hero
)
.sort((a, b) => a.currentPower - b.currentPower)
);
})
);
}
delete(id: number) {
return this.http.delete<Hero>(environment.apiUrl + 'heroes/' + id).pipe(
tap((deletedHero) => {
this._currentHeroes.next(
this._currentHeroes.value.filter(
(hero: Hero) => hero.id !== deletedHero.id
)
);
})
);
}
但我的目标是在使用 Subject 而不是 BehaviorSubject 时实现相同的目标。
我尝试获取主题的值,但这是不可能的,因为它是一个主题。我尝试在线搜索,但不幸的是,我没有找到任何有用的解决方案来满足我的需求。
有人遇到过这个问题吗?或者如何解决?
我假设你正在做一个服务,那么你可以在服务属性中引用你需要修改的数组。
heroes = [];
然后,在每次操作之后,您可以修改该值,然后使用 Subject 或 Behavior Subject 或您想要使用的任何内容发出。
powerUp(id: number) {
return this.http
.post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
.pipe(
tap((updatedHero: Hero) => {
//modify data reference, to add, update or delete value
// in this case modify with powerup
this.heroes = this.heroes
.map((hero: Hero) =>
hero.id === updatedHero.id ? updatedHero : hero
)
.sort((a, b) => a.currentPower - b.currentPower)
// emit the resuelt after every operation
this._currentHeroes.next(
this.herores
);
})
);
}
请记住,您必须订阅 return 您在代码中显示的可观察对象的每个操作。
// for example to hero with id 2
this.yourHeroService.powerUp(2).subscribe()
我有一个用户数组的主题
private _currentHeroes = new Subject<Hero[]>();
currentHeroes = this._currentHeroes.asObservable();
- 我的目标是只编辑数组的 1 个元素而不订阅
在我的服务中给用户加电的功能
powerUp(id: number) {
return this.http
.post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
.pipe(
tap((updatedHero: Hero) => {
this._currentHeroes.next(
// I would like to edit the specific element in the array and than sort them by the power.
);
})
);
}
我的服务删除用户的功能
delete(id: number) {
return this.http.delete<Hero>(environment.apiUrl + 'heroes/' + id).pipe(
tap((deletedHero) => {
this._currentHeroes.next(
// Here I delete the specific element from the array
);
})
);
}
如果主题是 BehaviorSubject 那么我会这样做:
powerUp(id: number) {
return this.http
.post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
.pipe(
tap((updatedHero: Hero) => {
this._currentHeroes.next(
this._currentHeroes.value
.map((hero: Hero) =>
hero.id === updatedHero.id ? updatedHero : hero
)
.sort((a, b) => a.currentPower - b.currentPower)
);
})
);
}
delete(id: number) {
return this.http.delete<Hero>(environment.apiUrl + 'heroes/' + id).pipe(
tap((deletedHero) => {
this._currentHeroes.next(
this._currentHeroes.value.filter(
(hero: Hero) => hero.id !== deletedHero.id
)
);
})
);
}
但我的目标是在使用 Subject 而不是 BehaviorSubject 时实现相同的目标。
我尝试获取主题的值,但这是不可能的,因为它是一个主题。我尝试在线搜索,但不幸的是,我没有找到任何有用的解决方案来满足我的需求。
有人遇到过这个问题吗?或者如何解决?
我假设你正在做一个服务,那么你可以在服务属性中引用你需要修改的数组。
heroes = [];
然后,在每次操作之后,您可以修改该值,然后使用 Subject 或 Behavior Subject 或您想要使用的任何内容发出。
powerUp(id: number) {
return this.http
.post<Hero>(environment.apiUrl + 'heroes/powerUp/' + id, {})
.pipe(
tap((updatedHero: Hero) => {
//modify data reference, to add, update or delete value
// in this case modify with powerup
this.heroes = this.heroes
.map((hero: Hero) =>
hero.id === updatedHero.id ? updatedHero : hero
)
.sort((a, b) => a.currentPower - b.currentPower)
// emit the resuelt after every operation
this._currentHeroes.next(
this.herores
);
})
);
}
请记住,您必须订阅 return 您在代码中显示的可观察对象的每个操作。
// for example to hero with id 2
this.yourHeroService.powerUp(2).subscribe()