当在Angular 2

Question

问题在于：

当我单击元素的text / span部分时，将选中该部分中的第一个复选框。如果我仅单击该复选框，则UI将按预期运行。 amenityEmit(payloadObj)函数按预期工作，这只是一个UI问题。 （我想。）

如何在点击相关联的<span><input ... />{{instance}}</span>时选中正确的复选框？

代码：

<label *ngSwitchCase="'checkbox'" class="filter-category-title">
  {{f.name}}
  <div class="filterSection">
    <span *ngFor="let instance of f.options" class="filterOption">
      <input type="checkbox"
          (click)="amenityEmit(
              {category: f.propName, filter: instance, resetCategory: false}
            )"> {{instance}}
    </span>
  </div>
</label>

Answer 1

可能是围绕一切的<label></label>

给它一个镜头，并在label和输入旁边的文本周围包裹input

Plunker 演示

<div *ngSwitchCase="'checkbox'" class="filter-category-title">
  {{f.name}}
  <div class="filterSection">
    <label *ngFor="let instance of f.options" class="filterOption">
      <input type="checkbox"
          (click)="amenityEmit(
              {category: f.propName, filter: instance, resetCategory: false}
            )"> {{instance}}
    </label>
  </div>
</div>

它可能会破坏你的一些css，但如果它修复了bug，那么一些css调整是次要的

Answer 2

另一种方法是编写一个CheckboxComponent并使用它，然后数据可以进出，并包含每个组件中的click函数。

checkbox.component.html

<input type="checkbox" (click)="amenityEmit()"> {{instance}}

checkbox.component.ts

import { Component, Input, Output } from "@angular/core";

@Component({
     selector: "checkbox",
     //template and css stuff
})
export class CheckboxComponent {

    @Output() public value: any = new EventEmitter()    

    @Input() public options: OptionsObject;

    public amenityEmit(): void {

        this.value.emit({
            category: f.propName, 
            filter: instance, 
            resetCategory: false
        });
    }    
}

为父级

<label *ngSwitchCase="'checkbox'" class="filter-category-title">
    {{f.name}}
    <div class="filterSection">
        <checkbox *ngFor="let instance of f.options" [options]="instance" (value)="amenityEmit($event)"></checkbox>
    </div>
</label>

一种不同的方法，可能会使父组件中的代码更清晰。