Fehlerbehandlung mit angular2 Async-Pipe

Question

Ich verwende die Angular2 Async-Pipe, um Werte in das DOM zu streamen. Hier ist ein echtes einfaches Beispiel:

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> 

Was würde ich tun möchte, ist die Sequenz von 1-5 angezeigt haben, aber auf dem Fehlerpunkt (3), irgendwie bevölkert die #error div mit der Fehlermeldung.

Dies scheint zwei Dinge zu erfordern: erstens ist die Fähigkeit der angularen asynchronen Leitung, etwas Intelligentes mit Fehlern zu tun, was ich nicht sehe. Betrachtet man den Quellcode, wird anscheinend eine JS-Ausnahme ausgelöst, die nicht sehr freundlich erscheint.

Zweitens ist die Möglichkeit, die Sequenz nach dem Fehler neu zu starten oder fortzusetzen. Ich habe gelesen über catch und onErrorResumeNext und so weiter, aber sie alle beinhalten eine andere Sequenz, die auf einen Fehler geschaltet wird. Dies kompliziert die Logik des Erzeugens des Stroms, auf den ich nur eine Reihe von Zahlen setzen möchte (in diesem einfachen Beispiel). Ich habe das sinkende Gefühl, dass sobald ein Fehler auftritt, das Spiel vorbei ist und das Observable abgeschlossen ist und nur mit einem anderen Observable "neu gestartet" werden kann. Ich lerne immer noch Observables; Ist das tatsächlich der Fall?

So ist meine Frage zweierlei:

1. Kann Angular2 des Asynchron-Rohr etwas intelligenter mit Fehlern tun?
2. Haben Observables eine einfache Möglichkeit, nach einem Fehler fortzufahren?

Answer 1

Ja Sie finden rechts in Bezug auf die Fang Betreiber und die Fähigkeit, etwas nach Fehlern zu tun auftreten ...

Ich würde die catch Betreiber nutzen, um die Fehler zu fangen und etwas tun:

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

und in der Vorlage:

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

der Lage sein, auf dem anfängliche beobachtbar zu gehen, müssen Sie Erstellen Sie eine neue, die an dem Punkt beginnt, an dem der Fehler auftritt:

und in den catch Rückruf verwenden:

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

Diese beiden Fragen könnte Ihnen helfen:

• How to resumeOnError (or similar) in RxJS5
• RxJS Continue Listening After Ajax Error (letzte Antwort)

Answer 2

1) Nein, Die async Pipe abonniert und abmeldet und gibt die empfangenen Ereignisse zurück. Sie müssten die Fehler behandeln, bevor sie die async Pipe empfangen.

2) Sie können den Catch-Operator verwenden, und wenn eine Observable zurückgegeben wird, wird der Wert von .catch(err => Observable.of(-1)) anstelle des Fehlers ausgegeben.

Sie könnten dies verwenden, um einen speziellen "Fehler" -Wert auszugeben, und dann etwas wie *ngIf="num === -1 verwenden, um den Fehlerwert in einer speziellen Weise anzuzeigen.

können Sie mehr Informationen zu diesem https://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html