Angular 2：div单击时的目标复选框答案

【问题标题】：Angular 2 : Target Checkbox on div clickAngular 2：div单击时的目标复选框
【发布时间】：2017-07-09 21:27:46
【问题描述】：

当用户单击 div(class=unit) 时，我想定位复选框并将其标记为选中/未选中。如果选中复选框，也应用选中的类单元，如果未选中复选框，则删除选中的类单元。

我尝试提出类似的问题，但对我没有任何帮助。谁能帮我完成 selectUnit($event)

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

【问题讨论】：

标签： angular

【解决方案1】：

虽然@Nehal 的答案是完全有效的，并且在'units'有限的情况下会起作用，但它不会很好地扩展，因为你必须每次都编辑 switch 语句，这违反了open/closed principle of SOLID。

如果您可能使用多个未知数量的“units”。考虑像这样使用reactive forms (Plunker here)：


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

【讨论】：

谢谢你能帮我理解this.from，逐步获得unitarr和onclick功能....对不起，我是新手
this.form 引用了之前用private form: Form 定义的属性。我使用 this.fb.group 方法为其分配了一个新的 [FormGroup](goo.gl/5gBcXY)。 get unitArr 这样我就可以在模板中写unitArr 而不是this.form.get....。它是一个 [ES6 getter](goo.gl/FwnDdt)。我假设你知道onClick 是如何被调用的。它将*ngFor 循环的index 作为参数，从表单数组（unitArr 之前缩短）中获取相关控制，并通过 ['toggling'] 将其值设置为与当前值相反的值（goo.gl/i2h2rb）它。 [教程](goo.gl/gkJb65)
感谢它对我有用。需要更多帮助....我得到全选并取消全选复选框....我该怎么做

【解决方案2】：

您可以做一些简单的事情，例如为每个 div 的复选框命名并将变量引用传递给由click 事件触发的函数，注意切换（因为您想通过单击 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

【讨论】：