web-dev-qa-db-fra.com

Angulaire: impossible de trouver un objet de support différent '[objet Objet]'

Je suis après ce tutoriel . En route pour obtenir la liste des utilisateurs d’api.github 

Impossible de trouver un objet de support différent '[objet Objet]'

Je pense que c'est lié à 

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

Dans mon code, car auparavant, il n'y avait pas d'erreur, et je ne sais pas si les données proviennent de la requête get, il suffit de cliquer pour ne pas donner d'erreur. Voici mon code jusqu'à présent.

@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
26
blackHawk

Je pense que l'objet que vous avez reçu dans votre réponse n'est pas un tableau. Peut-être que le tableau que vous souhaitez parcourir est contenu dans un attribut. Vous devriez vérifier la structure des données reçues ...

Vous pouvez essayer quelque chose comme ça:

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)
    );
}

Modifier

Après la documentation Github (developer.github.com/v3/search/#search-users), le format de la réponse est le suivant:

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

Donc, la liste des utilisateurs est contenue dans le champ items et vous devriez utiliser ceci:

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)
    );
}
34
Thierry Templier

J'ai reçu cette erreur dans mon code car je n'avais pas exécuté JSON.parse (résultat) . 

Donc, mon résultat était une chaîne au lieu d'un tableau d'objets.

c'est-à-dire que j'ai:

"[{},{}]"

au lieu de:

[{},{}]

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[];
                   }
  );
5
JGFMK

L'absence de crochets autour de la propriété d'entrée peut être à l'origine de l'erreur .Par exemple:

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

Correct:

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

Incorrect (erreur de déclenchement):

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

1
mp31415