Question

我是6号角的新手，并尝试使用反应形式填充选择字段

<form [formGroup]="form">
    <select id="estimated-volume" [formControlName]="'usage'">
        <option [value]="null">Usage</option>
        <option *ngFor="let option of availableBounds" [ngValue]="option">
            {{option.lower_bound}}-{{option.upper_bound}}
        </option>
    </select>
</form>

“用法”是默认值，角度代码是

this.form = new FormGroup({
      'usage': new FormControl(null, Validators.nullValidator),
    }
);
availableBounds = [
    {
       lower_bound: 0,
       upper_bound: 1000,
       value: 5
    },
    {
       lower_bound: 50000,
       upper_bound: 10000,
       value: 50
    }
]

到目前为止，一切工作正常，现在在api调用之后，我得到一个响应，在该响应中，我必须根据api用其他对象填充此select，因此我正在尝试执行此类操作。

response = {
               lower_bound: 2,
               upper_bound: 5,
               value: 5
           };

this.form.controls['usage'].setValue(response, {onlySelf: true});

但这不能为选择框设置值，对替代方法有何建议？预先感谢

Answer 1

availableBounds是对象数组，response是对象。清空availableBounds并将其推入response。这还将为选择框设置一个值。

var availableBounds = [
    {
       lower_bound: 0,
       upper_bound: 1000,
       value: 5
    },
    {
       lower_bound: 50000,
       upper_bound: 10000,
       value: 50
    }
];

console.log(availableBounds); 

var response = {
               lower_bound: 2,
               upper_bound: 5,
               value: 5
           };
           
availableBounds.length = 0;
availableBounds.push(response);
console.log(availableBounds);

Answer 2

首先，您必须将api响应推送到现有数组中，然后将值设置为formCOntrol

像这样

constructor(
    private fb: FormBuilder
  ) {
    this.form = this.fb.group({
      usage: ''
    })
  }

  ngOnInit() {
    let response = {
      lower_bound: 2,
      upper_bound: 5,
      value: 5
    };

    this.availableBounds.push(response);

    this.form.get('usage').setValue(response, { onlySelf: true });
  }

这是Stackblitz演示

Answer 3

请尝试在 availableBounds 数组中推送 response 对象，因为ngFor仅适用于数组。

availableBounds.push（response）;

Answer 4

如果您的[ngValue] =“ option”是一个对象，则需要等于一个对象。所以

//I supouse  you has a service that has a return httpClient.get(....)
myService.getValues().subscribe(res=>
   //imagine res={value:50}
{
  let select=this.availableBounds.find(a=>a.value==res.value)
  this.form = this.fb.group({
      usage: select || null  //<--the object itself or null
    })
});

您也可以分两步使用设置值

  let select=this.availableBounds.find(a=>a.value==5)
  this.form.get('usage').setValue(select || null);

动态更改选择值

4 个答案: