动态更改 select 值

Question

我是 angular 6 的新手，正在尝试使用反应形式填充 select 字段，

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

此处Usage为默认值，angular代码为

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});

但这无法为 select 框设置一个值，对于替代方法有什么建议吗？提前致谢

Answer 1

availableBounds 是对象数组，response 是对象。清空 availableBounds 并向其推送 response。这也将为 select 框设置一个值。

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（响应）；

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

动态更改 select 值

Changing select value dynamically

angular

angular-reactive-forms