將響應綁定到反應形式的Select下拉

Question

我真的很努力地將來自第三方API的HTTP響應綁定到我的Angular Reactive Form中的Select下拉列表中。

我知道如何填充選擇，如果我硬編碼，如：

merchants = [ 
     new MerchantOptions('1', 'Fake Test'), 
    ]; 

但我無能，如何從一個HTTP響應填充選擇？

我似乎無法將響應綁定到窗體控件？

請你能指教嗎？

export class myComponent implements OnInit { 
myForm: FormGroup; 
    stores = this.apiService.getStores() 
        .subscribe(
         (response) => { 
          console.log(response), 
          this.myForm.setValue(response) 
         }, 
         (error) => console.log(error) 
        ); 
constructor(private apiService: ApiService) { } 

    ngOnInit() { 
    this. myForm = new FormGroup({ 
    'merchants': new FormControl(null, Validators.required), 
    });  
    } 

我的數據模型：

export class MerchantOptions { 
    constructor(public id: string, public name: string) { } 
} 

這是我的表是這樣的：在我的鉻CONSOL

    <form [formGroup]="myForm" (ngSubmit)="onPost()"> 
        <div class="form-group"> 
        <label for="merchants">Stores</label> 
        <select id="merchants" 
         formControlName="merchants" 
         class="form-control"> 
         <option *ngFor="let merchant of merchants" value="{{ merchant.id }}"> 
         {{ merchant.name }} 
         </option> 
        </select> 
        </div> 
        <button class="btn btn-primary" type="submit">Submit</button> 
       </form> 

API響應輸出：

請原諒上面的任何命名或拼寫錯誤，我鍵入上面的代碼片段只是爲了讓您不要從實際項目複製粘貼。

Answer 1

export class myComponent implements OnInit { 
myForm: FormGroup; 
merchant: MerchantOptions[]; 
    stores = this.apiService.getStores() 
        .subscribe(
         (response) => { 
          this.merchant=response 
         }, 
         (error) => console.log(error) 
        ); 
constructor(private apiService: ApiService) { } 

    ngOnInit() { 
    this. myForm = new FormGroup({ 
    'merchants': new FormControl(null, Validators.required), 
    });  
    } 

使用這種merchant在你的HTML作爲merchant.id，merchant.name

Answer 2

嘗試申報marchants財產myComponent，然後從您的響應數據填充它。喜歡的東西：

在你的模板

export class myComponent implements OnInit { 
    myForm: FormGroup; 
    merchants: any; 
    stores = this.apiService.getStores() 
        .subscribe(
         (response) => { 
          this.merchants = response; 
         }, 
         (error) => console.log(error) 
        ); 
    constructor(private apiService: ApiService) { } 

    ngOnInit() { 
     this. myForm = new FormGroup({ 
      'merchants': new FormControl(null, Validators.required), 
     });  
    } 
} 

然後，只需使用merchants陣列，如：

<option *ngFor="let merchant of merchants" value="{{ merchant.ID }}"> 
    {{ merchant.name }} 
</option>