角2：divのクリック時のターゲットチェックボックス

Question

ユーザがdiv（class = unit）をクリックしたときにチェックボックスをオンにし、チェックボックスをオンまたはオフにしたいとします。また、チェックボックスがチェックされている場合はclass unit-selectedを適用し、チェックボックスがオフの場合はクラス単位選択を削除します。

私は同様の質問を参照しようとしましたが、何も私のために働いていません。誰もがあなたがそれぞれのdivのチェックボックスに名前を与えるような単純な何かをしてclickイベントによってトリガ機能への変数の参照を渡すことができ

<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}"> 
 
     <input type="checkbox" name="unit" /> 
 
     <div class="unit-number">abc</div> 
 
     <div class="unit-desc">Description</div> 
 
     </div> 
 
     
 
<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}"> 
 
     <input type="checkbox" name="unit" /> 
 
     <div class="unit-number">xyz</div> 
 
     <div class="unit-desc">Description</div> 
 
     </div> 
 
     
 
<div class="unit" (click)="selectUnit($event)" [ngClass]="{'unit-selected'}"> 
 
     <input type="checkbox" name="unit" /> 
 
     <div class="unit-number">mno</div> 
 
     <div class="unit-desc">Description</div> 
 
     </div>

Answer 1

@Nehalの答えは完全に有効であると限定がある場合に動作します "unitsがが」それswitch文を毎回編集しなければならないので、うまく拡張できません。これはopen/closed principle of SOLIDに違反します。

複数の未知量の 'units'を使用する可能性が高い場合は、 （Plunker here）ので、同じようreactive formsを使用することを検討してください：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form [formGroup]="form"> 
    <div formArrayName="unitArr"> 
     <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 
    } 
} 

Answer 2

（$イベント）、服用私はselectUnitを完了するのに役立ちますトグルを気にする必要があります（チェックボックス自体だけでなく、divをクリックして切り替えたいからです）。変数名を使用してngClassの条件を制御し、それをngModelにバインドしてチェックマーク表示を処理することができます。

サンプルHTML：

<div class="unit" 
    (click)="toggleCheckbox('unitABC')" 
    [ngClass]="{ 'unit-selected' : unitABC == true }"> 
    <input type="checkbox" name="unit" [(ngModel)]="unitABC"> 
    <div class="unit-number" >abc</div> 
    <div class="unit-desc">Description</div> 
</div> 

component.ts：

unitABC = false; 
unitXYZ = false; 
unitMNO = false; 

toggleCheckbox(currCheckbox){ 
    console.log(currCheckbox); 
    switch(currCheckbox){ 
    case 'unitABC' : 
     this.unitABC = !this.unitABC; 
     break; 
    case 'unitXYZ' : 
     this.unitXYZ = !this.unitXYZ; 
     break; 
    case 'unitMNO' : 
     this.unitMNO = !this.unitMNO; 
     break; 
    } 
} 

Full demo