[解決済み] Angular2 http.get()、map()、subscribe()とobservableパターン - 基本的な理解

質問

今、私は3つのリンクを持つ最初のページを持っています。最後の「friends」リンクをクリックすると、適切なフレンドコンポーネントが開始されます。その中で friends.jsonファイルに格納されている私の友人のリストを取得したいのです。 今のところ、すべてうまくいっています。しかし、私はRxJsのobservables、map、subscribeの概念を使ったangular2のHTTPサービスについてはまだ初心者なんです。私はそれを理解しようとし、いくつかの記事を読みましたが、私が実用的な仕事に入るまで、私はそれらの概念を適切に理解するつもりはありません。

ここで、私はすでにHTTP関連の作業を除いて動作しているplnkrを作りました。

Plnkr

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.

       }
  }

きちんとした指導と説明をお願いします。それは多くの新しい開発者にとってとても有益なことだと思います。

どのように解決するのですか？

以下は、あなたが間違った方向に進んでしまったところです。

this.result = http.get('friends.json')
                  .map(response => response.json())
                  .subscribe(result => this.result =result.json());

となるはずです。

http.get('friends.json')
                  .map(response => response.json())
                  .subscribe(result => this.result =result);

または

http.get('friends.json')
                  .subscribe(result => this.result =result.json());

あなたは2つの間違いを犯しています。

1- observable 自体を this.result . 実際に友達のリストを割り当てる場合は this.result . 正しいやり方は

• observableをサブスクライブします。 .subscribe は実際にobservableを実行する関数です。以下の3つのコールバック・パラメータを受け取る。

  .subscribe(success, failure, complete);

例えば

.subscribe(
    function(response) { console.log("Success Response" + response)},
    function(error) { console.log("Error happened" + error)},
    function() { console.log("the subscription is completed")}
);

通常は、successコールバックから結果を受け取り、変数に代入します。 エラー・コールバックは自明である。 completeコールバックは、エラーなしで最後の結果を受け取ったかどうかを判断するために使用されます。

2- 2つ目の間違いは、あなたが .json() について .map(res => res.json()) そして、observableのsuccessコールバックで再度呼び出した。 .map() はトランスフォーマーで、結果をあなたが返すものに変換します (あなたの場合は .json() のコールバックに渡されます。 のどちらかで一度呼び出す必要があります。