Ahora, tengo una página inicial donde tengo tres enlaces. Una vez que hace clic en el último enlace de 'amigos', se inicia el componente de amigos apropiado. Ahí, quiero buscar / obtener la lista de mis amigos almacenados en el archivo friends.json. Hasta ahora todo funciona bien. Pero todavía soy un novato en el servicio HTTP de angular2 que usa el concepto de observación, mapa y suscripción de RxJs. He tratado de entenderlo y leer algunos artículos, pero hasta que no entre en el trabajo práctico, no voy a entender esos conceptos correctamente.
Aquí ya hice plnkr que funciona, excepto el trabajo relacionado con HTTP.
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.
}
}
Por favor guíe y explique adecuadamente. Sé que será muy beneficioso para muchos desarrolladores nuevos.