使用 *ngFor 创建多个复选框

Question

我正在尝试重写用 Angular 5 编写的部分代码，该代码使用了三个硬编码复选框，因此它们根据我从后端获得的对象数量动态创建。

在模板中有：

<div class="row">
<div class="col-md-3">
<label class="control-label">Options 1</label>
<input type="checkbox" id="option1" name="option1" [value]="true" [(ngModel)]="context.option1"
(change)="context.option1 = !context.option1"/>
</div>
<div class="col-md-3">
<label class="control-label">Options 2</label>
<input type="checkbox" id="option2" name="option2" [value]="false" [checked]="context.option2"
(change)="context.option2 = !context.option2"/>
</div>
<div class="col-md-3">
<label class="control-label">Options 3</label>
<input type="checkbox" id="option3" name="option3" [value]="false" [checked]="context.option3"
(change)="context.option3 = !context.option3"/>
</div>
</div>

在模型中(代码段(：

export class SomeClass {
public company: string;
...
public option3: boolean = false;
public option2: boolean = false;
public option1: boolean = false;
...
constructor(company: string) {
this.company = company;
...
}
}

现在我这样重写它： 模板：

<div class="row">
<div class="col-md-3" *ngFor="let option of this.context.someClassWithBean.someBean; let i = index">
<label class="control-label">Options {{i}}</label>
<input type="checkbox" id="option{{i}}" name="option{{i}}" [value]="true" [(ngModel)]="context.options[i]"
(change)="context.options[i] = !context.options[i]"/>
</div>
</div>

在模型中(代码段(：

export class SomeClass {
public company: string;
...
public options: boolean [];
...
constructor(company: string) {
this.company = company;
...
}
}

我当然有问题。代码没有输出选项(选项 0、选项 1...(的索引，如果我从(change)="context.options[i] = !context.options[i]中删除 [i]，那么它会写入选项 1 等，但我怀疑它是否有效，因为现在没有数组索引。最重要的是，我有

"错误类型错误： 无法读取未定义的属性'0'">

在这两种情况下。我不确定这是否是正确的方法。

有什么建议吗？

Answer 1

为了参考，以下是解决方案： 在模型中，我必须初始化数组：

public options: boolean[] = [];

然后在组件中，我必须添加：

if (this.context.options.length === 0) {
this.context.someClassWithBean.someBean.forEach(() => {
this.context.options.push(false);
});
}