html - 如何在 Angular 2+ 中预选和更新复选框

Question

我想在 Angular 中实现一个 list 。必须根据 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 为 bool 值。现在在选择复选框时，currentQuestion 对象正在正确更改，但是当 list 第一次加载时，复选框未正确选中。如果 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>

(我添加了；让i=index和[i])