Блог

Я делаю так, чтобы 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>
  

смотрите мой мат-чип

Если я правильно понял ваш вопрос, то вы хотите иметь возможность щелкнуть в любом месте мат-чипа, чтобы изменить состояние вашего флажка.

Поскольку вы уже привязываете checked свойство вашего ввода к полю, вызываемому checked в вашем компоненте, все, что вам нужно сделать, это зарегистрировать обработчик события click на вашем mat-чипе, который изменяет поле 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>
  

Ссылка на живой пример Stackblitz