Angular 4将复选框绑定到* ngFor中的数组

Question

我想每当在* 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>

对于此代码，我得到错误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;
}

这是附加到实际的组件。

Answer 1

这对我有用，但是代码太多。 只是为了回答我的问题；

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