围绕 div 单击的 Angular Material 复选框

Question

我有一个 angular 5 material checkbox，周围有一个 div 和一些其他元素。我希望单击 div 与直接单击 checkbox 上的 click 相同。

这是我的示例代码:

<div (click)="checked = !checked">
  <mat-checkbox class="example-margin" [(ngModel)]="checked">
                I'm a not working checkbox :'(                  
  </mat-checkbox>
  <span style="background-color: #dddd00;">I want to be clickable too</span>
</div>

和一个Stackblitz

目前单击复选框本身不起作用，单击 div 外部有效。有什么想法吗？

Answer 1

这里的问题是 div 上的 Click 事件和复选框上的 [(ngModel)] 都相互无效，这就是它不起作用的原因.

要使其正常工作，您需要在单击 div 元素时 stopPropagation。所以我做了如下代码 returning false 从停止它的 div click 事件，你的代码将工作。

Working Demo

组件.ts

export class CheckboxConfigurableExample {
  checked = false;
  indeterminate = false;
  align = 'start';
  disabled = false;

  onChecked() {
  this.checked= !this.checked;
  return false;
  }
}

组件.thml

<mat-card class="result">
    <mat-card-content>
        <h2 class="example-h2">Result</h2>
        <section class="example-section">
            <div (click)="onChecked();">
                <mat-checkbox class="example-margin" [(ngModel)]="checked">
          not working checkbox :'( 
                </mat-checkbox>
        <span  style="background-color: #dddd00;">I want to be clickable too</span>
       </div> 

        </section>
    </mat-card-content>
</mat-card>