单击标签时获取动态生成的 mat-checkbox 的状态

Question

我正在尝试将动态生成的复选框状态传递给单击标签时调用的方法

这是 html:

<div *ngFor="let label of consent.labels" style="flex-direction: column">
  <div [ngClass]="{'accept': consent.aceptado === true, 'optional': !consent.obligatorio }">
    <section style="margin-top: 5px;">

      <mat-checkbox color="primary" [(ngModel)]="consent.aceptado" (change)="verify()">
        <div [innerHTML]="label.label | safeHtml" (click)="detailSubConsent(checkBoxState, $event)"></div>
      </mat-checkbox>

    </section>
  </div>
</div>

作为附加信息，使用 event.preventDefault() 我可以防止在单击标签时更改复选框的状态

有什么方法可以捕获动态生成的复选框的当前状态以将其传递给单击时执行的方法吗？

Answer 1

你总是 link 将同一个复选框设置到同一个 ngModel，所以如果你有一个它们的列表，你最终会很困惑（它们都具有相同的值），你应该 link 每个单独的复选框到不同的 ngModel，我建议为每个标签创建一个带有键的新对象，现在我不知道你的标签对象类型定义，我将演示解决方案假设每个标签都有一个唯一的 ID。

   <div *ngFor="let label of consent.labels" style="flex-direction: column">    
      <mat-checkbox color="primary" [(ngModel)]="obj[label.id]">
    <div [innerHTML]="label.label | safeHtml" (click)="detailSubConsent(label.id, $event)"></div>

      </mat-checkbox>
    </div>


   detailSubConsent(id, $event){
   //access the state as shown below 
   this.obj[id]
   }

单击标签时获取动态生成的 mat-checkbox 的状态

Get status of a dynamically generated mat-checkbox when clicking on the label

angular

typescript

angular-material

angular-ngmodel