角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選擇/取消選擇所有複選框

回答

相關問題