Question

当用户点击div（class = unit）时我想要定位复选框并将其标记为选中/取消选中。如果选中复选框，也会应用class unit-selected，如果未选中复选框，则删除class unit-selected。

我尝试引用类似的问题，但没有任何对我有用。任何人都可以帮我完成selectUnit（$ event）

＆＃13;

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

＆＃13;

Answer 1

你可以做一些简单的事情，例如给每个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

Answer 2

虽然@Nehal的答案完全有效，但如果有限的units＆＃39;则会有效，但由于您必须编辑每次都会切换语句，这违反了open/closed principle of SOLID。

如果您可能使用多个未知数量的＆＃39; units＆＃39;。考虑使用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
  }
}

角度2：点击div上的目标复选框

2 个答案: