NgFor поддерживает только связывание с итерируемыми и Bootstrap-Select-Box пуст

Question

РЕШЕНИЕ:

Мы решили 2 проблемы здесь:

1) Неправильное назначение с httpt.get , мы получили сообщение об ошибке:

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

2) Сроки с Bootstrap-Select-Box; Опция-поля пустые

1) НЕПРАВИЛЬНО ПЕРЕДАЧА

После присвоения является неправильным:

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

и дает выход:

[Object, Object, Object, Object , ..]

что не итератора с помощью ngFor и должна быть исправлена ​​в:

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

Для полноты картины, это ws.get-метод:

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

и это agency:

agency: any[]; 

2) СРОКИ ПРОБЛЕМА Bootstrap-SELECT & ANGULAR2

Это бутстрапом-Select-Box (немного - относительно CI - адаптированный вариант):

<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> 

Активизирующаяся из selectpicker происходит в:

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

Но importang вещь отсутствовала; поле выбора было отображено до того, как наблюдаемые испускают данные. Поэтому мы должны проверить наличие агентства до и после этого сделать поле:

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

Вот и все! Возможно, эта информация вам тоже полезна;)

Answer 1

Вы разместили объект Subscription, записав this.agency = this.ws.get(serviceUrls.agency) в переменную agency. Не делай этого. Оставьте это для успеха.Просто удалите this.agency =. Или! Вы можете использовать async pipe, но удалите свой обратный вызов.

У вас возникли проблемы с bootstrap-select из-за свойства [value]. См. here. Поэтому вы должны использовать [ngValue]. И еще одна вещь, вы пытаетесь выбрать picker, когда у вас на самом деле нет данных, но если вы завернете init в check для this.agency existance, он будет работать.

Answer 2

Его непонятно, какой тип agency есть. Похоже на его agency: any.

Если бы это было agency: any[], он должен работать, чтобы перебирать его.

Смотрите эту plunker: https://plnkr.co/edit/gV6FT0QiZwpybDxUzj1P?p=preview

импортирования {Component, NgModule} от '@ угловую/ядро' импортирования {BrowserModule} от '@ угловой/платформы-браузер'

@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

Я не уверен, почему вы используете

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

Я полагаю, определение ваших this.ws.get() возвращает Observable<Agency> объекта. Это не то, что вы хотите. Это возвращаемое значение будет объектом типа Observable<Agenc>, а не массивом агентств, Agency[].

Просто позвонив:

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

должен установить this.agency содержать массив агентств.