Javascript 角度4将复选框绑定到*ngFor中的数组

每当选中复选框时，我都想向数组中添加一个项，因为我正在寻找一种不需要太多代码或使用组件方法的简洁方法。我知道这在angular版本1中非常容易

<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>

然后是方法

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;
    }
}

@组件({
...
})
导出类RoleUsersComponent实现OnInit{
..
UsersToRemove:UsersToRemove=newuserstoremove
建造师(
...
) {
...
}
...
添加或删除用户（用户，选中）{
如果（选中==true）{
this.UsersToRemove.AddUser（用户）
}否则{
this.UsersToRemove.RemoveUser（用户）
}
console.log（“UsersToRemove:”，this.UsersToRemove.Users）
}
}
类UsersToRemove{
用户：任何[]；
构造函数（）{this.Users=[]；}
不活动：布尔值=false；
AddUser（用户）：无效{
如果（！this.UserExists（user））{
this.Users.push（用户）；
}
}
RemoveUser（用户）：无效{
对于（var_i=0；_i

模板：

<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的类型脚本吗。用户。。。从大写/小写的使用来看，看起来是静态的……使用表单的最佳实践是使用反应式表单。我建议你朝这个方向走。这只是一张桌子，不是一张表格。它在一个循环中只有一个复选框和一个“删除选定项”按钮。我认为使用Responsive formsright需要更多的工作，所以您需要一个UsersToRemove实例并调用这个.instance.Users[这个用户id]绑定到[（ngModel）]。这不起作用。我得到错误

错误类型错误：无法读取未定义的属性“13”

<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>