我正在尝试将Angular 1应用程序转换为Angular 2.通过锯齿状的布尔数组循环(boolean[][]).我正在checkboxes使用以下代码进行渲染:
<div *ngFor="#cell of CellData; #parentIndex = index">
<input *ngFor="#col of cell; #childIndex = index" type="checkbox" [(ngModel)]="CellData[parentIndex][childIndex]" />
</div>
Run Code Online (Sandbox Code Playgroud)
复选框显示正确,但是,如果我选中一个复选框,也会选中右侧的复选框.
这个逻辑在Angular 1应用程序中工作正常,所以我不确定这是否与我使用ngModel的方式或Angular 2的问题有关.
任何帮助将非常感激
所以在Angular2应用程序中我有一个名为'recipe.ingredients'的字符串数组,我有一个表单设置允许您编辑成分,添加和删除文本字段(和数组中的项目)的按钮.
<ul class="list-unstyled">
<div class="row" *ngFor="let ingredient of recipe.ingredients; let i=index">
<li>
<div class="col-xs-4">
<input
size="20"
type="text"
class="form-control"
[ngModel]="recipe.ingredients[i]"
#t
(blur)="recipe.ingredients[i]=t.value"
required>
</div>
<div class="btn-group col-xs-2" role="group">
<button
type="button"
class="btn btn-default btn-xs"
(click)="recipe.ingredients.splice(i,1)">-</button>
<button
type="button"
class="btn btn-default btn-xs"
(click)="recipe.ingredients.splice(i+1,0,'')">+</button>
</div>
</li>
</div>
</ul>
Run Code Online (Sandbox Code Playgroud)
你会注意到我没有用[(ngModel)]双向绑定到recipe.ingredients [i],那是因为我试过了,每次你输入一个字符时,文本框都会失去焦点.我认为这与*ngFor踩过数组有关.无论如何,目前这种解决方法很好,但现在我添加了一些功能,我需要两种数据绑定才能工作.知道如何重构这个以使其工作吗?