Jetzt habe ich eine erste Seite, auf der ich drei Links habe. Sobald Sie auf den letzten Link "Freunde" klicken, wird die entsprechende Freundeskomponente initiiert. Dort möchte ich eine Liste meiner Freunde abrufen / abrufen, die in der Datei friends.json gespeichert ist. Bis jetzt funktioniert alles gut. Aber ich bin immer noch ein Neuling für den HTTP-Dienst von angle2, der das Observable-, Map- und Subscribe-Konzept von RxJs verwendet. Ich habe versucht, es zu verstehen und einige Artikel zu lesen, aber bis ich in die praktische Arbeit komme, werde ich diese Konzepte nicht richtig verstehen.
Hier habe ich bereits plnkr gemacht, das außer HTTP-bezogene Arbeit funktioniert.
myfriends.ts
import {Component,View,CORE_DIRECTIVES} from 'angular2/core';
import {Http, Response,HTTP_PROVIDERS} from 'angular2/http';
import 'rxjs/Rx';
@Component({
template: `
<h1>My Friends</h1>
<ul>
<li *ngFor="#frnd of result">
{{frnd.name}} is {{frnd.age}} years old.
</li>
</ul>
`,
directive:[CORE_DIRECTIVES]
})
export class FriendsList{
result:Array<Object>;
constructor(http: Http) {
console.log("Friends are being called");
// below code is new for me. So please show me correct way how to do it and please explain about .map and .subscribe functions and observable pattern.
this.result = http.get('friends.json')
.map(response => response.json())
.subscribe(result => this.result =result.json());
//Note : I want to fetch data into result object and display it through ngFor.
}
}
Bitte führen und erklären Sie richtig. Ich weiß, dass es für viele neue Entwickler von großem Nutzen sein wird.
getFriends(){return http.get('friends.json').map(r => r.json());}
. Jetzt können Sie anrufen,getFriends().subscribe(...)
ohne.json()
jedes Mal anrufen zu müssen .Konzepte
Observables in kurzen Abschnitten befasst sich mit asynchroner Verarbeitung und Ereignissen. Im Vergleich zu Versprechungen könnte dies als Observables = Versprechungen + Ereignisse beschrieben werden.
Was bei Observablen großartig ist, ist, dass sie faul sind, abgebrochen werden können und Sie einige Operatoren in ihnen anwenden können (wie
map
...). Dies ermöglicht es, asynchrone Dinge auf sehr flexible Weise zu handhaben.Ein großartiges Beispiel, das die Leistung von Observablen am besten beschreibt, ist die Möglichkeit, einen Filtereingang mit einer entsprechenden gefilterten Liste zu verbinden. Wenn der Benutzer Zeichen eingibt, wird die Liste aktualisiert. Observables verarbeiten entsprechende AJAX-Anforderungen und brechen frühere laufende Anforderungen ab, wenn eine andere durch einen neuen Wert in der Eingabe ausgelöst wird. Hier ist der entsprechende Code:
(
textValue
ist die dem Filtereingang zugeordnete Steuerung).Hier ist eine breitere Beschreibung eines solchen Anwendungsfalls: Wie kann man in Angular 2 auf Formänderungen achten? .
Auf AngularConnect 2015 und EggHead gibt es zwei großartige Präsentationen:
Christoph Burgdorf hat auch einige großartige Blog-Beiträge zu diesem Thema geschrieben:
In Aktion
In Bezug auf Ihren Code haben Sie zwei Ansätze gemischt ;-) Hier sind sie:
Verwalten Sie das Beobachtbare selbst . In diesem Fall sind Sie dafür verantwortlich, die
subscribe
Methode für das Observable aufzurufen und das Ergebnis einem Attribut der Komponente zuzuweisen. Sie können dieses Attribut dann in der Ansicht verwenden, um die Sammlung zu durchlaufen:Renditen von beiden
get
undmap
Methoden sind das Beobachtbare, nicht das Ergebnis (auf die gleiche Weise wie bei Versprechungen).Lassen Sie das Beobachtbare durch die Winkelvorlage verwalten . Sie können die
async
Pipe auch nutzen , um das Observable implizit zu verwalten. In diesem Fall muss diesubscribe
Methode nicht explizit aufgerufen werden.Sie können feststellen, dass Observables faul sind. Die entsprechende HTTP-Anfrage wird also nur einmal aufgerufen, wenn ein Listener mit der
subscribe
Methode daran angehängt ist .Sie können auch feststellen, dass die
map
Methode verwendet wird, um den JSON-Inhalt aus der Antwort zu extrahieren und ihn dann in der beobachtbaren Verarbeitung zu verwenden.Hoffe das hilft dir, Thierry
quelle
pipes
sind auch einobservables
. Schauen Sie sich dieses Video an: youtube.com/watch?v=bVI5gGTEQ_U vorgeschlagen von thierry für weitere Informationen.Die HttpClient-API wurde in Version 4.3.0 eingeführt. Es ist eine Weiterentwicklung der vorhandenen HTTP-API und verfügt über ein eigenes Paket @ angle / common / http. Eine der bemerkenswertesten Änderungen ist, dass das Antwortobjekt jetzt standardmäßig ein JSON ist, sodass es nicht mehr mit der Map-Methode analysiert werden muss
quelle