角2选择/取消选择所有复选框

我要选择/取消选择所有复选框。我试图闯民宅其他代码，但没有什么工作对我来说角2选择/取消选择所有复选框

下面是我的代码。选择unseleting特定单位正在为我工作。基本上当我点击div它选择/取消选择复选框，并添加颜色。但我很困惑与选择所有/取消选择所有

请帮我用我的代码

//our root app component 
 
import {Component, NgModule, VERSION} from '@angular/core' 
 
import {BrowserModule} from '@angular/platform-browser' 
 
import { ReactiveFormsModule, FormGroup, FormBuilder } from '@angular/forms'; 
 

 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    <form [formGroup]="form"> 
 
    <div formArrayName="unitArr"> 
 
    <label><input type="checkbox" />Select all</label> 
 
    <label><input type="checkbox" />unSelect all</label> 
 
     <div 
 
     *ngFor="let unit of units; let i = index" 
 
     class="unit" 
 
     (click)="onClick(i)" 
 
     [ngClass]="{'unit-selected': unitArr.controls[i].value}"> 
 
      <input type="checkbox" formControlName="{{i}}"/> 
 
      <div class="unit-number">{{ unit.num }}</div> 
 
      <div class="unit-desc">{{ unit.desc }}</div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
    `, 
 
    styles: [`.unit-selected { color: red; }`] 
 
}) 
 
export class App implements OnInit{ 
 
    private units = [ 
 
    {num: 1, desc: 'Decription'}, 
 
    {num: 2, desc: 'Decription'}, 
 
    {num: 3, desc: 'Decription'}, 
 
    ]; 
 
    private form: Form; 
 
    
 
    constructor (private fb: FormBuilder) {} 
 
    
 
    ngOnInit() { 
 
    this.form = this.fb.group({ 
 
     unitArr: this.fb.array(
 
     this.units.map((unit) => { 
 
      return this.fb.control(false); // Set all initial values to false 
 
     }) 
 
    ) 
 
    }); 
 
    } 
 
    
 
    // Shorten for the template 
 
    get unitArr(): FormArray { 
 
    return this.form.get('unitArr') as FormArray; 
 
    } 
 

 
    onClick(i) { 
 
    const control = this.unitArr.controls[i]; 
 
    control.setValue(!control.value); // Toggle checked 
 
    } 
 
} 
 

 
@NgModule({ 
 
    imports: [ BrowserModule, ReactiveFormsModule ], 
 
    declarations: [ App ], 
 
    bootstrap: [ App ] 
 
}) 
 
export class AppModule {}

来源

2017-08-09 Jay

我猜你正在寻找的东西像[这]（https://embed.plnkr.co/h9wFGz/） –

为什么不张贴此作为回答，而不是评论，然后？ – Graham

不要这样写：'formControlName = “{{我}}”'但是这不是：'[formControlName] = “我”' – ncohen

制作由拉胡尔和ncohen提供意见的组合做我们可以在这里使用patchValue。

而对于取消选择所有复选框，我把它改成一个按钮，在这个答案，对我来说，似乎是一个复选框是不是真的适合（？），因为处理在复选框中打勾。但是，这取决于你，如果你愿意使用复选框:)

至于检查是否“全选”复选框应进行检查或没有，你可以这样做：

[checked]="checkAllSelected()"

，然后在TS：

checkAllSelected() { 
    return this.form.controls.unitArr.controls.every(x => x.value == true) 
}

这里我们则必须记住，这是在每个变化检测运行。所以也许你会想用一个变量来代替，这当然取决于具体情况，即这对你来说代价如何，但我不认为它会成为这种情况。

因此，这是您的范本看起来怎么样：

<label> 
    <input type="checkbox" [checked]="checkAllSelected()" 
     (click)="selectAll($event.target.checked)"/>Select all 
</label> 
<button (click)="unselectAll($event.target.checked)">Unselect All</button>

我们的复选框的状态模板，evalate传递要么检查所有或取消所有：

selectAll(isChecked) { 
    if isChecked 
    this.form.controls.unitArr.controls.map(x => x.patchValue(true)) 
    else 
    this.form.controls.unitArr.controls.map(x => x.patchValue(false)) 
}

当然，当用户点击清除按钮：

unselectAll() { 
    this.form.controls.unitArr.controls.map(x => x.patchValue(false)) 
}

DEMO：http://plnkr.co/edit/O194WEimjf3XzfiIrWF0?p=preview

来源

2017-08-10 08:29:33 Alex

角2选择/取消选择所有复选框

回答

相关问题