休憩サービスからのページの読み込みでUIを更新する方法

Question

ロード時にデータをドロップダウンリストに移入するために、angular2でUIを取得するという問題があります。

私は私たちの内部SDKに接続するサービスをsdkに持っています。私たちは、observableを返すrest end-pointを持っています。私のコードでは、sdk上でそのメソッドを呼び出し、それはデータを受信するために、私はネットワークのタブで私はそれを見ることができるように、データが戻って、私のUIが代わりに、奇妙に込み入って取得しないで、私は送信ボタンをクリックすると値が表示されるか、ハッシュ値でURLを追加しました。これをクリックすると、それもUIをトリガーするように見えて、ドロップダウンリストにデータが表示されます。なぜですか、何も入力せずにデータを入力するだけです。

export class RequestFormComponent implements OnInit{ 
    reqForm: FormGroup; 
    resultDetails: any[] = []; 

constructor(
    private formBuilder: FormBuilder, 
    private router: Router, 
    private requestDetails: DataServices) {} 

    ngOnInit(): void { 
    this.reqForm = this.formBuilder.group({ 
     acceptedTermsAndConditions: [false, Validators.pattern('true')], 
     itemSelection: ['', [Validators.required]] 
    }); 

    this.getSaleItems(); 
    } 

getSaleItems(): void { 
    this.requestDetails.getForSaleItems() 
    .subscribe((data) => this.resultDetails.push(data[0].itemsLIst)); 
    }; 

形式：

<form class="saleForm" 
      novalidate 
      (ngSubmit)="fullfillSale()" 
      [formGroup]="saleForm"> 

<select class="lngField" id="itemSelection" formControlName="itemSelection"> <option disabled="disabled" value="">-- Please select an Item --</option> <option *ngFor="let details of resultDetails">Item: {{ details.description }}</option> </select> 

</form> 

Answer 1

あなたがFormBuilderを失うと、単にコードについてはFormGroup & FormControl

を使用することができ、最終的なリリース以降を使用していると仮定すると、私はあなたの問題はここにある疑いthis.resultDetails.push(data[0].itemsLIst)。 itemsLIstは配列ですか？もしそうなら、あなたはthis.resultDetails.push(...data[0].itemsLIst);

をここで使用する必要がありますFormGroupを使用してplnkr作業です：Select Updated By Service