angular - example - ng-options filter

Angular: no se puede encontrar un objeto de soporte diferente ''[objeto Objeto]''

Question

Estoy siguiendo este tutorial . En el camino para obtener la lista de usuarios de api.github, obtengo un error:

No se puede encontrar un objeto de soporte diferente ''[objeto objeto]

Creo que está relacionado con

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

En mi código porque antes no había ningún error, y no estoy seguro de si los datos provienen de la solicitud, simplemente haciendo clic no dio ningún error, aquí está mi código hasta ahora

@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])

Answer 1

Algo que me ha sorprendido más de una vez es tener otra variable en la página con el mismo nombre.

Por ejemplo, en el ejemplo a continuación, los datos para el NgFor están en las requests variables. Pero también hay una variable llamada #requests utilizada para el if-else

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

Answer 2

Creo que el objeto que recibió en su carga útil de respuesta no es una matriz. Quizás la matriz que desea iterar está contenida en un atributo. Debe verificar la estructura de los datos recibidos ...

Podrías probar algo así:

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

Editar

Siguiendo el documento de Github (developer.github.com/v3/search/#search-users), el formato de la respuesta es:

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

Entonces, la lista de usuarios está contenida en el campo de items y debe usar esto:

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

Answer 3

La falta de corchetes alrededor de la propiedad de entrada puede causar este error. Por ejemplo:

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

Correcto:

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

Incorrecto (error de activación):

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

Answer 4

Recibí este error en mi código porque no había ejecutado JSON.parse (resultado) .

Entonces mi resultado fue una cadena en lugar de una matriz de objetos.

es decir, tengo:

"[{},{}]" 

en lugar 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[];
                   }
  );