web-dev-qa-db-ja.com

角度：異なるサポートオブジェクト '[オブジェクトオブジェクト]'が見つかりません

このチュートリアル をフォローしています。 api.githubからユーザーのリストを取得する途中で、エラーが表示されます。

異なるサポートオブジェクト '[オブジェクトオブジェクト]'が見つかりません

に関連すると思います

 <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])
angularangular2-routingangular2-directivesangular2-http
35
blackHawk

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

あなたはそのようなものを試すことができます：

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のドキュメント（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)
    );
}
39
Thierry Templier

JSON.parse（result）を実行しなかったため、コードでこのエラーを受け取りました。

したがって、私のresultはオブジェクトの配列ではなく文字列でした。

すなわち、私は得た：

"[{},{}]"

の代わりに：

[{},{}]

import { Storage } from '@ionic/storage';
...
private static readonly SERVER = 'server';
...
getStorage(): Promise {
  return this.storage.get(LoginService.SERVER);
}
...
this.getStorage()
  .then((value) => {
     let servers: Server[] = JSON.parse(value) as Server[];
                   }
  );
7
JGFMK

入力プロパティの周囲に角かっこがないと、このエラーが発生する場合があります。例えば：

Component Foo {
    @Input()
    bars: BarType[];
}

正しい：

<app-foo [bars]="smth"></app-foo>

不正解（トリガーエラー）：

<app-foo bars="smth"></app-foo>

6
mp31415

何回も私を捕まえたのは、同じ名前の別の変数がページにあることです。

例えば。以下の例では、NgForのデータは変数requestsにあります。ただし、if-elseに使用される#requestsという変数もあります

<ng-template #requests>
  <div class="pending-requests">
    <div class="request-list" *ngFor="let request of requests">
      <span>{{ request.clientName }}</span>
    </div>
  </div>
</ng-template>
0
Kildareflare