如何根据Angular中的值显示选择选项

发布于 2025-02-12 13:13:57 字数 1003 浏览 4 评论 0原文

我想根据对象中的数据在选择列表中显示一些选项。例如，如果数据属性为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
}

原文

I want to display some options in a select list based on data in an object. For example if the data property is 0 i want to display a select option as 0 , with option to change to 1, vice versa. However in the html, no option value is played in the field. What am i doing wrong?

Here is my code:

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

Here is an example of an object i am passing to the html/view:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

凌乱心跳 2025-02-19 13:13:57

不建议您手动手动，而是建议只提供category.isvisible值向FormControl提供。反应性形式将处理它。

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

解决方案1：formcontrol的补丁值。

注意：如果类别对象是从API中获得的。

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

解决方案2 ：formcontrol的补丁值。

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

解决方案3：patch 类别对formGroup的对象

。到表格组而不是每个属性绑定到一个一个一个。

this.form.patchValue(this.category);

将 nofollow noreferrer“>示例stackblitz demo

Not suggest doing your approach manually, but would suggest that just provide the category.isVisible value to FormControl. The reactive form will handle it.

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

Solution 1: Patch value to FormControl.

Note: This approach is not suggested if the category object is got from API.

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

Solution 2: Patch value to FormControl.

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

Solution 3: Patch category object to FormGroup.

Note: Do consider this approach when you want to bind the whole object to the form group instead of binding each property to form control one by one.