NgFor unterstützt nur die Bindung an Iterables & Bootstrap-Select-Box leer ist

Question

LÖSUNG:

Wir 2 ​​Probleme hier gelöst haben:

1) Falsche Zuordnung mit httpt.get haben wir die Fehlermeldung bekommen:

ORIGINAL EXCEPTION: Cannot find a differ supporting object 
'[object Object]' of type 'object'. 
NgFor only supports binding to Iterables such as Arrays. 

2) Timing-Problem mit Bootstrap-Select-Box; Option-Felder sind leer

1) FALSCH AUFGABE

Nach der Abtretung ist falsch:

this.agency = this.ws.get(serviceUrls.agency) 
    .subscribe(
    (data:any) => this.agency = data, 
    (err:any) => console.debug('AGENCY ERROR:',err), 
    () => console.debug(this.agency) 
); 

und gibt die Ausgabe:

[Objekt, Objekt, Objekt, Objekt , ..]

was nicht über ngFor wird Iterable und sollte in korrigiert werden:, ist dies ws.get-Methode

this.ws.get(serviceUrls.agency) 
    .subscribe(
    (data:any) => **this.agency = data**, // <-- ONLY HERE 
    (err:any) => console.debug('AGENCY ERROR:',err), 
    () => console.debug(this.agency) 
); 

Aus Gründen der Vollständigkeit halber:

get(url: string) { 
    return this.http.get(url) 
     .map((data:any) => data.json()); 
    } 

und das ist die Agentur:

2) Timing-Problem mit BOOTSTRAP-SELECT & ANGULAR2

, dass der Bootstrap-Select-Box ist (ein wenig - in Bezug auf CI - angepasste Version):

<select [(ngModel)]="localValues.agency" 
     name="agency" 
     id="agency" 
     class="selectpicker select-search" 
     data-selectpicker 
     data-live-search="true" 
     required=""> 
    <option 
    *ngFor="let item of agency" 
    [ngValue]="item.value"> 
    {{ item.label }} 
    </option> 
</select> 

Die aktivierende von selectpicker geschieht in:

ngAfterViewChecked() { 
    //noinspection TypeScriptUnresolvedFunction 
    $('.selectpicker').selectpicker(); 
    } 

Aber ein importang Ding fehlte; Die Auswahlbox wurde gerendert, bevor die Observablen Daten ausstrahlten. Daher müssen wir vorher die Existenz der Agentur prüfen und dann die Box rendern:

ngAfterViewChecked() { 
    if (this.agency) { // <-- IMPORTANT! 
     //noinspection TypeScriptUnresolvedFunction 
     $('.selectpicker').selectpicker(); 
    } 
} 

Das ist alles! Vielleicht ist diese Information auch für Sie nützlich;)

Answer 1

Sie setzen Subscription Objekt durch Schreiben this.agency = this.ws.get(serviceUrls.agency) in Variable agency. Tu das nicht. Überlassen Sie es Ihrer Erfolgsfunktion.Entfernen Sie einfach this.agency =. Oder! Sie können async pipe verwenden, aber Ihren Erfolgsrückruf entfernen.

Sie haben Probleme mit bootstrap-select wegen der Eigenschaft [value]. Siehe here. Du solltest also [ngValue] verwenden. Und noch etwas, Sie versuchen, den Selectpicker, wenn Sie tatsächlich keine Daten haben, aber wenn Sie die Init in Prüfung für this.agency Existenz wickeln, wird es funktionieren.

Answer 2

Es ist nicht klar, welcher Typ agency ist. Scheint wie sein agency: any.

Wenn es wäre agency: any[] sollte es funktionieren, um darüber zu iterieren.

Sehen Sie diese Plunker: https://plnkr.co/edit/gV6FT0QiZwpybDxUzj1P?p=preview

Import {Component, NgModule} von '@ Winkel/core' Import {BrowserModule} von '@ Winkel/Plattform-Browsers

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <p *ngFor="let item of agency">{{item.value ? item.value : '--NOT THERE--'}}</p> 
    </div> 
    `, 
}) 
export class App { 

    agency: any[]; 

    constructor() { 
    this.name = 'Angular2 (Release Candidate!)' 

    this.agency = [ 
     { anything: '' }, 
     { value: 'huhu', qwrtaj: null }, 
     { value: 'hehe', ufgjksak: null }, 
     { lksdl: null }, 
     { value: 'hoho', length: null }, 
     ]; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

Answer 3

Ich bin nicht sicher, warum Sie verwenden

this.agency = this.ws.get(serviceUrls.agency) 
     .subscribe(...) 

ich nehme die Definition Ihrer this.ws.get() kehrt Observable<Agency> Objekt. Das ist nicht was du willst. Dieser Rückgabewert ist ein Objekt vom Typ Observable<Agenc> und nicht ein Array von Agenturen, Agency[].

einfach anrufen:

this.ws.get(serviceUrls.agency) 
    .subscribe(
     (data:any) => this.agency = data, 
     (err:any) => console.debug('AGENCY ERROR:',err), 
     () => console.debug(this.agency) 
    ); 

die this.agency gesetzt sollte eine Reihe von Agenturen zu enthalten.