[英]How to bind an array to checkbox using Angular2 ReactiveFormsModule?
[英]Angular 4 bind checkbox to array in *ngFor
我想每當在* 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;
}
這是附加到實際的組件。
這對我有用,但是代碼太多。 只是為了回答我的問題;
@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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.