0

解决方案：

我们在这里解决了 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 和 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();
  }

但是缺少一件重要的事情；选择框是在可观察对象发出数据之前呈现的。因此我们必须先检查是否存在代理，然后渲染该框：

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

就这样！也许这些信息对你也有用；）

4

3 回答 3

1

您通过写入变量来放置Subscription对象。不要那样做。把它留给你的成功功能。只需删除. 或者！您可以使用异步管道，但删除您的成功回调。this.agency = this.ws.get(serviceUrls.agency)agencythis.agency =

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

于 2016-08-18T17:50:28.647 回答
0

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

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

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

从“@angular/core”导入 {Component, NgModule} 从“@angular/platform-b​​rowser”导入 {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 {}
于 2016-08-18T17:53:33.813 回答
0

我不确定你为什么使用

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以包含一系列机构。

于 2016-08-18T18:45:46.570 回答