Question

我想在Angular中实现一个清单。必须根据ts文件中的数组预先检查某些框，并且在选中复选框时必须更新数组。我这样做：

<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
  <input type="checkbox" aria-label="Checkbox 1" [value]="option.text" name="checkBox" [(ngModel)]="optionsSelectedArray"/>
  <label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>

optionsSelectedArray包含从服务器检索的选项ID。

但它不起作用。渲染除法时，将检查所有复选框。

修改

我已将代码更改为：

<div class='form-group que-box' *ngFor="let option of currentQuestion.options">
  <input type="checkbox" id="{{option.optionId}}" name="checkBox" [(ngModel)]="option.userResponse" (ngModelChange)= "setResponseChanged()">
  <label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>

这里是布尔值option.userResponse。现在选中复选框时，currentQuestion对象正在正确更改，但是当第一次加载清单时，复选框未正确检查。如果最后一项option.userResponse为真，则检查所有复选框否则。

Answer 1

也许这可能会做你想要的事情

<div class='form-group que-box' *ngFor="let option of currentQuestion.options; let i=index">
  <input type="checkbox" aria-label="Checkbox 1" name="checkBox" [(ngModel)]="optionsSelectedArray[i]"/>
  <label for='{{option.optionId}}'><span class="que">{{option.text}}</span></label>
</div>

（我添加了; let i=index和[i]）

如何预先选择和更新Angular 2+中的复选框

1 个答案: