Question

我有一个嵌套的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，如果这些选项中的任何一个具有toBeSelected作为true，则应在HTML中预先选择该选项，否则，应显示占位符文本。

Answer 1

与此类似吗？

<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的示例，但应该可以帮助您了解如何实现。

Sample StackBlitz

Answer 2

根据有问题的JSON，您可以将其设置为：

ngOnInit() {
    this.form = this._FormBuilder.group({
      selections: this._FormBuilder.array([])
    });

    // the api call should be made here
    this.jsonResponse.map(item => {
        const opts = item.options.filter(o => {
            return o.toBeSelected
        });
        if (opts.length) {
            this.addSelections(opts[0].option);
        } else {
            this.addSelections();
        }
    });
}

get selections() {
    return this.form.get('selections') as FormArray
}

addSelections(value?: string) {
    this.selections.push(
        this._FormBuilder.control((value ? value : ''))
    );
}

实时取景here。

Stackblitz链接：https://stackblitz.com/edit/dynamic-form-binding-kx7nqf

带有Angular的选择框中的表单组绑定

2 个答案: