2017-05-07 2 views
0

私は個人的なアプリケーションで作業しています。私の目標は、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を使って私のサービスへの呼び出しをシミュレートしました。

  1. 割り当てthis.users.merge(this.deleteSubject)私は私のplunkerを更新return acc.concat(val);

return val;からscanオペレータの変更のために他のブロックで

  • this.usersへ:

    私は私の問題を修正し
  • 答えて

    0

    、私は2つの変更をしなければなりませんでしたあなたが見てみたい場合。 乾杯。

    関連する問題