NgFor 仅支持绑定到 Iterables & Bootstrap-Select-Box 为空

Question

解决方案：

我们在这里解决了2个问题：

1) Wrong assignment with httpt.get, we have got the error message:

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 with Bootstrap-Select-Box; option-fields are empty

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-方法:

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

这是机构:

agency: any[];

2) BOOTSTRAP-SELECT & 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>

select选择器的激活发生在：

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

但是缺少一件重要的东西； select-box 在 observables 发出数据之前渲染。因此我们必须先检查是否存在代理然后渲染框：

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

就是这样！也许这些信息对您也有用 ;)

Answer 1

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

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

Answer 2

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

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

看到这个笨蛋：https://plnkr.co/edit/gV6FT0QiZwpybDxUzj1P?p=preview

从“@angular/core”导入 {Component, NgModule} 从“@angular/platform-browser”

导入 {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() returns Observable<Agency> 对象的定义。这不是你想要的。此返回值将是 Observable<Agenc> 类型的对象，而不是 Agencies 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 设置为包含一组代理机构。

NgFor 仅支持绑定到 Iterables & Bootstrap-Select-Box 为空

NgFor only supports binding to Iterables & Bootstrap-Select-Box is empty

iterable

observable

bootstrap-select

ngfor

angular