[解決済み】Angular: オブジェクトをサポートしているdiffが見つからない '[object Object]'

質問

以下はその例です。 このチュートリアル . api.githubからユーザーのリストを取得する途中で、エラーが発生しました。

オブジェクトをサポートしている差分が見つかりません '[object Object]'.

に関連していると思います。

 <ul>
 <li *ngFor = "#user of users">
 {{user | json}}
 </li>
 </ul>

私のコードでは、その前にどんなエラーもなかったので、私はデータが取得要求から来るかどうかわからない、ちょうどクリックはどんなエラーを与えなかった、ここまでは私のコードは次のとおりです。

@Component({
selector: 'router',
pipes : [],

template: `
<div>
<form [ngFormModel] = "searchform">
      <input type = 'text' [ngFormControl]= 'input1'/>
</form>
     <button (click) = "getusers()">Submit</button>
</div>
<div>
<ul>
    <li *ngFor = "#user of users">
    {{user | json}}
    </li>
</ul>
</div>
<router-outlet></router-outlet>
`,
directives: [FORM_DIRECTIVES]
})
export class router {
searchform: ControlGroup;
users: Array<Object>[];
input1: AbstractControl;

constructor(public http: Http, fb: FormBuilder) {
    this.searchform = fb.group({
        'input1': ['']
    })
    this.input1 = this.searchform.controls['input1']
}
getusers() {
    this.http.get(`https://api.github.com/
search/users?q=${this.input1.value}`)
        .map(response => response.json())
        .subscribe(
        data => this.users = data,
        error => console.log(error)
        )
}
}
bootstrap(router, [HTTP_PROVIDERS])

解決方法は？

レスポンスペイロードで受け取ったオブジェクトが配列ではないのだと思います。おそらく、反復処理したい配列が、ある属性に含まれているのでしょう。受信したデータの構造を確認する必要があります。

みたいなことをやってみたらどうでしょう。

getusers() {
  this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
    .map(response => response.json().items) // <------
    .subscribe(
      data => this.users = data,
      error => console.log(error)
    );
}

編集

Github doc (developer.github.com/v3/search/#search-users) に従えば、レスポンスのフォーマットは次のようになります。

{
  "total_count": 12,
  "incomplete_results": false,
  "items": [
    {
      "login": "mojombo",
      "id": 1,
      (...)
      "type": "User",
      "score": 105.47857
    }
  ]
}

つまり、ユーザーのリストは items フィールドがあるので、これを使うべきでしょう。

getusers() {
  this.http.get(`https://api.github.com/search/users?q=${this.input1.value}`)
    .map(response => response.json().items) // <------
    .subscribe(
      data => this.users = data,
      error => console.log(error)
    );
}