如何在Angular中显示基于值的选择选项

Question

我想根据对象中的数据在选择列表中显示一些选项。例如，如果数据属性为0，我希望将选择选项显示为0，并将选项更改为1，反之亦然。但是在html中，字段中没有显示选项值。我做错了什么?

下面是我的代码:

<div class="form-group">
<label for="isVisible" class="label">Set Visibility</label>
<select *ngIf="category.isVisible === 0" class="form-select" id="isVisible" formControlName="isVisible">
<option selected value="0">Hidden</option>
<option value="1">Visible</option>
</select>
<select *ngIf="category.isVisible === 1" class="form-select" id="isVisible" formControlName="isVisible">
<option selected value="1">Visible</option>
<option value="0">Hidden</option>
</select>
</div>

下面是一个我传递给html/view的对象的例子:

{
"id": 10023,
"product": "nike tiempo trainers",
"price": 55.00,
"isVisible": 1
}

Answer 1

不建议做你的方法手动，但建议只提供category.isVisible值FormControl。响应式表单会处理它。

<select class="form-select" id="isVisible" formControlName="isVisible">
<option value="0">Hidden</option>
<option value="1">Visible</option>
</select>

解决方案1:补丁值到FormControl.

注意:如果category对象是从API获取的，则不建议使用此方法。

this.form = this.fb.group({
isVisible: [this.category.isVisible],
});

解决方案2:补丁值到FormControl.

this.form.controls.isVisible.patchValue(this.category.isVisible);

方案三:将category对象补丁到FormGroup.

注意:当您希望将整个对象绑定到表单组而不是将每个属性逐个绑定到表单控件时，请考虑使用此方法。

this.form.patchValue(this.category);

StackBlitz Demo示例