NgFor仅支持绑定到Iterables＆amp; 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)
  );

并给出输出：

[对象，对象，对象，对象，..]

什么不能通过 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-method ：

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

这是代理商：

agency: any[];

2）BOOTSTRAP-SELECT＆amp; amp; ANGULAR2

这是Bootstrap-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();
  } 

但缺少重要的东西;选择框在observable发出数据之前呈现。因此，我们必须先检查代理商是否存在，然后再显示该框：

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

这就是全部！也许这些信息也对你有用;）

Answer 1

您通过将Subscription写入变量this.agency = this.ws.get(serviceUrls.agency)来放置agency个对象。不要那样做。留给你成功的功能。只需删除this.agency =即可。要么！您可以使用async pipe但删除成功回调。

由于[value]属性，您在bootstrap-select时遇到问题。见here。所以你应该使用[ngValue]。还有一件事，当你实际上没有数据时，你正在尝试使用selectpicker，但是如果你将init包装成检查this.agency存在它将会有效。

Answer 2

不清楚agency是什么类型。 好像它是agency: any。

如果它是agency: any[]，它应该可以迭代它。

请参阅此plunker：https://plnkr.co/edit/gV6FT0QiZwpybDxUzj1P?p=preview

从＆＃39; @ angular / core＆＃39;导入{Component，NgModule} 从＆＃39; @ angular / platform-b​​rowser＆＃39;

导入{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设置为包含一系列代理商。