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

这附加到实际的组件。

来源

2017-07-18 LogicDev

你能后的打字稿的UsersToRemove.Users ......在这似乎是一个静态的，从你使用大/小写的一瞥...... – JGFMK

最佳实践与表单一起工作就是使用反应形式。 https://angular.io/guide/reactive-forms我建议你在这个方向找到。 – Smiranin

这只是一张表格而已。它在循环中只有1个复选框，并且有一个“Remove selected”按钮。我认为使用反应形式 – LogicDev

这适用于我，但代码太多。只是为了回答我的问题;

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

来源

2017-07-18 17:34:07 LogicDev

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

回答

相关问题