Angular2非同期パイプによるエラー処理

Question

Angular2非同期パイプを使用して値をDOMにストリームします。ここでは実際の簡単な例です：私がやりたい何

const stream = Observable.interval(1000) 
    .take(5) 
    .map(n => { if (n === 3) throw "ERROR"; return n; }); 

<div *ngFor="for num of stream | async"> 
    {{num}} 
</div> 

<div id="error"></div> 

1-5のシーケンスを表示することですが、エラー項目に（3）、何とかエラーメッセージが表示されて#errorのdivを取り込みます。

これは2つのことを必要とするように思われます。まず、Angular非同期パイプがエラーのあるインテリジェントな処理を行う能力です。ソースコードを見ると、明らかにJS例外がスローされてしまいます。

2つ目は、エラーが発生した後でシーケンスを再起動し続けることです。私はcatchとonErrorResumeNextなどについて読んだことがありますが、それらはすべてエラー時に切り替わる別のシーケンスを含んでいます。これは、ストリームを生成するロジックを非常に複雑にします。この単純な例では、一連の数値を入力するだけです。私は一度エラーが発生するとゲームが終了し、観察可能なものが完成し、異なる観察可能な状態でのみ「再開」することができます。私はまだ観察可能なことを学んでいます。これは実際に事実ですか？

は、だから私の質問は2つあり：

1. はAngular2の非同期パイプは、エラーのある知的な何かを行うことができますか？
2. observablesにはエラーが発生した後も簡単な方法がありますか？

Answer 1

に関する詳細な情報を見つけることができます...

私はエラーをキャッチして何かをするcatchオペレータ活用します：

const stream = Observable.interval(1000) 
    .take(5) 
    .map(n => { 
    if (n === 3) { 
     throw Observable.throw(n); 
    } 
    return n; 
    }) 
    .catch(err => { 
    this.error = error; 
    (...) 
    }); 

とテンプレートで：

<div>{{error}}</div> 

初期に観察に行くことができるようにするために、以下を行う必要がありエラーが発生した時点から新しいものを作成します。

createObservable(i) { 
    return Observable.interval(1000) 
    .range(i + 1, 5 - i) 
    .take(5 - i) 
    }); 
} 

およびcatchコールバックでそれを使用します。これらの二つの質問はあなたを助けることができる

.catch(err => { 
    this.error = error; 
    return this.createObservable(err); 
    }); 

：

• How to resumeOnError (or similar) in RxJS5
• RxJS Continue Listening After Ajax Error（最後の答え）

Answer 2

1）いいえ、asyncパイプはサブスクライブし、サブスクライブを解除し、受信したイベントを返します。エラーを処理してからasyncパイプを受け取る必要があります。

2）キャッチ演算子を使用できます。キャッチ演算子を使用すると、観察可能な値が返されたときにその値がエラーの代わりに.catch(err => Observable.of(-1))によって生成されます。

これを使用して特殊な「エラー」値を出力し、*ngIf="num === -1のようなものを使用して、エラー値を特別な方法で表示できます。

あなたは、はいあなたが正しいキャッチオペレータとエラーが発生した後に何かをする能力についているこのhttps://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html