Angular 5中的预填充复选框

Question

在Angular 5项目中，我有一个模板驱动的表单，该表单由以下数组预先填充：

let data = [{
    Title: "My Title",
    Description: "My description",
    Value: "my_value",
    Category: "category_name",
    SelectionType: SelectionDisplayType.Checkbox,
    Selected: false
}]

这里是html：

<ul>
     <li *ngFor="let item of data; let i = index;">
          <label [for]="item.Title">{{ item.Title }}</label>
          <input ngModel #columnValuesInputs 
            [id]="item.Title" 
            [name]="item.Category" 
            [type]="((item.SelectionType === SelectionType.Checkbox) ? 'checkbox' : 'radio')" 
            [checked]="((item.Selected) ? 'checked' : '')" 
            [value]="item.Value" />
     </li>
</ul>

我的问题是，即使我将item.Value绑定到[value]属性，对于复选框和单选按钮，所有输入字段“值”属性也会被填充except。因此，当我通过{{ formFilter.value | json }}输出值时，复选框和单选按钮值为空。

反应形式是可取的，但是我只能使用模板驱动的形式。

[谁能告诉我我在做什么错吗？

Answer 1

个人添加了反应形式。我已经完全放弃了ngModel。

private form: FormGroup;

constructor(private formBuilder: FormBuilder){}

ngOnInit(){
   this.form = this.formBuilder.group({
     Title: "My Title",
     Description: "My description",
     Value: "my_value",
     Category: "category_name",
     SelectionType: SelectionDisplayType.Checkbox,
     Selected: false
    })
}

<div *ngIf="form" [formGroup]="form">
  <input formControlName="Value" />
</div>

Answer 2

尝试使用

[ngModel]="item.Selected" 

这是一种绑定方式。如果需要双向绑定（不推荐），请使用：-

[(ngModel)]="item.Selected" 

这将在您检查时采取行动。另一种选择是保持一种方式绑定并监听输入的更改（单选按钮必须以不同的方式处理）

[ngModel]="item.Selected"  (click)="item.Selected=!item.Selected"

https://stackblitz.com/edit/angular-6-checkbox-69tnvh?file=src%2Fapp%2Fapp.component.html

Answer 3

使用此

 [checked]="((item.Selected) ? true : false)"