Angular 4绑定复选框到数组中* ngFor
问题描述:
我想在数组中添加一个项目到数组中* ngFor我正在寻找一个简单的方法来完成这个任务,但没有太多的代码或者使用组件方法。我知道这曾经是很容易在角版本1Angular 4绑定复选框到数组中* ngFor
<tr *ngFor="let this_user of RoleUsers.Users">
...
<input type="checkbox" class="custom-control-input" [(ngModel)]="UsersToRemove.Users[this_user.id]" /> <!--[(ngModel)]="" --> <!-- ng-false-value="expression"-->
..
</tr>
对于这个代码我得到错误ERROR TypeError: Cannot read property '13' of undefined
,所以我觉得我很接近。
目前我正在使用用户id来跟踪密钥,但如果我可以有一个很好的数组。如果没有组件方法这是不可能的,请举例说明。
更新 我设法使用较少的代码得到这个工作;
<input type="checkbox" class="custom-control-input" (change)="AddOrRemoveUser(this_user, $event.target.checked)" />
然后该方法;
AddOrRemoveUserToRemove (user, checked) {
console.log ("Remove or add: ", user, checked);
}
我认为这是最快的方法。
UsersToRemove对象看起来像这样;
class UsersToRemove {
Users: any[];
InAction: boolean = false;
}
这附加到实际的组件。
答
这适用于我,但代码太多。只是为了回答我的问题;
@Component({
...
})
export class RoleUsersComponent implements OnInit {
..
UsersToRemove: UsersToRemove = new UsersToRemove
constructor(
...
) {
...
}
...
AddOrRemoveUser (user, checked) {
if (checked==true){
this.UsersToRemove.AddUser(user)
}else {
this.UsersToRemove.RemoveUser(user)
}
console.log ("UsersToRemove: ", this.UsersToRemove.Users)
}
}
class UsersToRemove {
Users: any[];
constructor() { this.Users = []; }
InAction: boolean = false;
AddUser (user): void {
if (!this.UserExists(user)){
this.Users.push(user);
}
}
RemoveUser (user): void {
for (var _i = 0; _i < this.Users.length; _i++) {
if (this.Users[_i].id==user.id){
this.Users.splice(_i, 1)
}
}
}
UserExists (user): boolean {
let exists = false;
for (var _i = 0; _i < this.Users.length; _i++) {
if (this.Users[_i].id==user.id){
exists = true;
}
}
return exists;
}
}
模板:
<tr *ngFor="let this_user of RoleUsers.Users">
...
<th scope="row" *ngIf="UsersToRemove.InAction">
<label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
<input type="checkbox" class="custom-control-input" (change)="AddOrRemoveUser (this_user, $event.target.checked)" /> <!--[(ngModel)]="" --> <!-- ng-false-value="expression"-->
<span class="custom-control-indicator"></span>
</label>
</th>
...
</tr>
你能后的打字稿的UsersToRemove.Users ......在这似乎是一个静态的,从你使用大/小写的一瞥...... – JGFMK
最佳实践与表单一起工作就是使用反应形式。 https://angular.io/guide/reactive-forms我建议你在这个方向找到。 – Smiranin
这只是一张表格而已。它在循环中只有1个复选框,并且有一个“Remove selected”按钮。我认为使用反应形式 – LogicDev