Question

我将mat-chips设为未选中状态，但对于特定区域（仅单击标签），仅单击以选中未选中的工作，现在我要单击html代码下方未选中的垫子芯片上的任何位置正在使用。

<mat-chip-list formControlName="sample">  
     <mat-chip  mat-raised-button>
         <div mat-card-avatar class=""></div>  
                  <input class="checkbox" type="checkbox" 
                        [checked]="checked" value="sample" 
                        id="sample" name="sample"> 
                  <label for="sample">sample</label>
        </mat-chip>
</mat-chip-list>

see my mat-chip

Answer 1

如果我正确理解您的问题，那么您希望能够在芯片上的任意位置单击以更改复选框的状态。

由于您已经将输入的checked属性绑定到组件中名为checked的字段，所以您要做的就是在子芯片上注册一个click事件处理程序，修改字段checked。除此之外，我将单向检查绑定更改为双向绑定。由于存在多次点击事件，因此我在复选框中添加了(click)='$event.stopPropagation()'。

类似的事情应该起作用：

<mat-chip-list formControlName="sample"> 
 <mat-chip  mat-raised-button (click)="checked=!checked">
     <div mat-card-avatar class=""></div>  
              <input class="checkbox" type="checkbox" 
                      [(ngModel)]='checked'
                    id="sample" name="sample" (click)='$event.stopPropagation()'>
              <label for="sample">sample</label>
    </mat-chip>

Link to Stackblitz live example

如何使未检查的垫片成为未检查的？

1 个答案: