Question

我真的很难将来自第三方API的HTTP响应绑定到我的Angular Reactive Form中的Select下拉列表。

我知道如何填充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) { }
}

这就是我的表格：

                  <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>

我的chrome consol中的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),
  });    
  }

在您的html中使用此merchant作为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>

将HTTP响应绑定到响应形式的Select下拉列表

2 个答案: