私は個人的なアプリケーションで作業しています。私の目標は、Observablesを使ってユーザーを検索して削除することです。(クローズド)既存の検索ストリームの件名を削除する
private deleteSubject = new Subject();
delete(user: User): void {
this.userService
.delete(user)
.then(() => {
this.deleteSubject.next('');
})
.catch(() => {
console.log('error');
});
}
private setUsers(): void {
... // here comes the search functionality shown above
this.subscription = this.deleteSubject.subscribe(
(term: string) => this.users = this.userService.search(''),
(err) => console.log(err)
);
}
私はこの実装に直面問題は、私が削除した後:私はこれを使用
export class UserComponent implements OnInit {
users: Observable<User[]>;
private searchTerms = new Subject<string>();
ngOnInit(): void {
this.setUsers();
}
private setUsers(): void {
this.users = this.searchTerms
.debounceTime(300) // wait 300ms after each keystroke before considering the term
.distinctUntilChanged() // ignore if next search term is same as previous
.switchMap(term => term // switch to new observable each time the term changes
// return the http search observable
? this.userService.search(term)
// or the observable of all users if there was no search term
: this.userService.search(''))
.catch(() => {
this.response = -1;
return Observable.of<User[]>([]);
});
}
}
削除機能について:私はthisアイデアを使用している検索機能については、これは私が実装方法です私がsearchTerms
の加入者を失ったため、私はthis.users
を再割り当てしたので、ユーザの検索機能が壊れています。だから、私は検索して、merge
演算子を使用して別の件名を追加することができることを発見した後、thisアイデアに従ってください。悲しいことに私は実装の問題に直面しています。私が試したこの:
delete(user: User): void {
...
// change
this.deleteSubject.next('');
// with
this.deleteSubject.next({op: 'delete', id: user.id});
}
private setUsers(): void {
...
this.users.merge(this.deleteSubject)
.startWith([])
.scan((acc: any, val: any) => {
if (val.op && val.op === 'delete') {
let index = acc.findIndex((elt: any) => elt.id === val.id);
acc.splice(index, 1);
return acc;
} else {
return acc.concat(val);
}
});
しかしthis.deleteSubject
はそれのための加入者を持っていないので、私のscan
オペレータが実行されることはありません。私はサブスクライバーを作成し、私のthis.deleteSubject
に関連付ける方法を知っていますが、それを私のmerge
オペレーターと混ぜ合わせる方法はわかりません。また、それは少し複雑になっていることを参照して、私はこれを行うために別の方法でなければならないと思います。コメントは高く評価されます。
私のplunkerを見てください、希望は少し明確になります。私はメモリ配列userList
を使って私のサービスへの呼び出しをシミュレートしました。
- 割り当て
this.users.merge(this.deleteSubject)
私は私のplunkerを更新return acc.concat(val);
return val;
からscan
オペレータの変更のために他のブロックで
this.users
へ:私は私の問題を修正し