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

variableSubscriptionに書き込むことで object を入れます。そうしないでください。サクセス機能はお任せください。削除するだけです。または！非同期パイプを使用できますが、成功のコールバックを削除してください。this.agency = this.ws.get(serviceUrls.agency)agencythis.agency =

[value] プロパティが原因で、bootstrap-select に問題があります。ここを参照してください。したがって、[ngValue] を使用する必要があります。もう1つ、実際にはデータがないときにselectpickerを実行しようとしていますが、initをラップして存在を確認するthis.agencyと機能します。

于 2016-08-18T17:50:28.647 に答える
0

どのタイプかは不明agencyです。そのようagency: anyです。

もしそうなら、それagency: any[]を反復するのにうまくいくはずです。

このプランカーを参照してください: https://plnkr.co/edit/gV6FT0QiZwpybDxUzj1P?p=preview

import {Component, NgModule} from '@angular/core' import {BrowserModule} from '@angular/platform-b​​rowser'

@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 に答える