角度観測可能なエラー処理

Question

私は単純なアプリケーションを構築するために角度チュートリアルに従っています。アプリは、入力ボックスに用語を入力すると、ユーザーを検索するためにajaxを送信します。私はObservableとここで混同しています。

(1)検索語が3語より短い場合は、データを消去したいと考えています。私はObservable.ofを使って空の配列を返します。

(2) httpエラーが発生した場合、空の配列もcatchブロックに返されます。

しかし、私がthis.usersを新しいObservableに向けているため、これらの2つのケースのいずれかの後、ストリームが停止しているように見えます。もう一度this.users = new Subject()のようなことをしてください。ここでそれを行う正しい方法は何ですか？

HTML：

<div class="wrapper"> 
    <input #searchBox id="search-box" (keyup)="search(searchBox.value)" /> 
    <div class="loader" [hidden]="!loading"></div> 
</div> 

getUserService：

//Sending ajax, return an Observable 

コンポーネント：

export class searchComponent implements OnInit { 

    constructor(private getUserService: GetUserService) { } 

    private searchTerms = new Subject<string>(); 

    users: Observable<User[]>; 
    loading: boolean = false; 

    search(term: string): void { 
     if(term.length >= 3) { 
      this.loading = true; 
      this.searchTerms.next(term); 
     } else { 

      //issue (1) occurs after this 

      this.users = Observable.of<User[]>([]); 
     } 
    } 

    ngOnInit(): void { 
    this.users = this.searchTerms 
     .debounceTime(400) 
     .distinctUntilChanged() 
     //service will not be called after (1) or (2) occurs 
     .switchMap(term => this.getUserService.getUser(term)) 
      .map(data => { 
       this.loading = false; 
       return data; 
      }) 
     .catch(error => { 

     //issue (2) occurs after this 

     this.loading = false; 
     return Observable.of<User[]>([]); 
     }); 
    } 
} 

Answer 1

あなたは正しい場所で物事をやっていません。むしろそうであるべきです

search(term: string) { 
    // emit systematically. The observable chain will just return 
    // 0 result if the term is too short 
    this.searchTerms.next(term); 
} 

ngOnInit() { 
    this.users = this.searchTerms 
     .debounceTime(400) 
     .distinctUntilChanged() 
     .switchMap(term => { 
     if (term.length < 3) { 
      return Observable.of([]); 
     } 
     else { 
      this.loading = true; 
      return this.getUserService.getUser(term) 
        // catch here to make sure that an http error doesn't break the chain 
        .catch(() => return Observable.of([]) 
        .finally(() => this.loading = false); 
     } 
     }); 
}