时间戳

首页 > 解决方案 > 使用 Angular 在选择框中绑定表单组

html - 使用 Angular 在选择框中绑定表单组

问题描述

我有一个嵌套的 JSON 数组，我必须使用 formgroup 或 formarray 迭代到 HTML。此响应将根据数组的长度迭代到动态创建的选择框中。传入的 JSON 响应是：

var result = [{
    id: 1,
    options: [
      { option: 'Ram', toBeSelected: false },
      { option: 'Ravi', toBeSelected: true }
    ]
  },
  {
    id: 2,
    options: [
      { option: 'Pooja', toBeSelected: false },
      { option: 'Prakash', toBeSelected: false }
    ]
  }
]

我必须以这样的方式将其迭代到 HTML 中，如果这些选项中的任何一个具有toBeSelectedas true，则应在 HTML 中预先选择该选项，如果没有，则可以显示占位符文本。

标签： htmlangularformarrayformgroups

解决方案

类似的东西？

<div *ngFor="let result of results">
  <p>ID - {{ result.id }}</p>
  <div *ngFor="let option of result.options">
    <input 
      type="checkbox" 
      [checked]="option.toBeSelected">
      {{ option.option }}
  </div>
</div>

虽然这不是 FormGroup 的示例，但应该可以帮助您了解如何完成它。

示例 StackBlitz

推荐阅读