как отключить событие клика, когда флажок снят в угловом 2

Question

Я использую событие клика на ул.У меня есть флажок под ul, когда флажок установлен, мой список должен быть включен, и событие click должно работать.если флажок снят, мой список должен быть отключен, событие щелчка не должно работать.

Вот мой список ниже:

<td mat-cell *matCellDef="let element; let i = index">
 <div fxLayout="row" fxLayoutAlign="start start" [style.backgroundColor]="i.checked ? '#D4EBFF':''">
    <div fxFlex="1">
      <h2>{{element.position}}</h2>
    </div>
    <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="94">
      <ul class="imagelist-ul" (click)="listclick()">
        <li class="imagelist-label"><strong>{{element.label}}</strong></li>
        <li class="imagelist-totalincl"><strong>Total Inclusion:</strong> {{element.total_inclusion}}</li>
        <li class="imagelist-avg"><strong>Average Probability:</strong> {{element.avg_probability}}</li>
      </ul>
    </div>
    <div fxFlex="5" class="imagelist-chkbox">
        <mat-checkbox color="primary" #i (change)="!i['checked']"></mat-checkbox>
    </div>
  </div>
</td>

Может кто-нибудь, пожалуйста, подскажите мне, как этого добиться.

Answer 1

Добавьте ngClass в зависимости от состояния вашего флажка, как показано ниже, в ваш список ul.

[ngClass]="{'isDisabled': !i.checked}"

Добавьте приведенный ниже класс в ваш файл CSS.Здесь указатель-события : нет, все указатели будут отключены.

.isDisabled {
    pointer-events: none;
    opacity: 0.5;
}

Окончательный код может быть таким, как указано ниже: -

 <div fxLayout="row" fxLayoutAlign="start start" [style.backgroundColor]="i.checked ? '#D4EBFF':''">
    <div fxFlex="1">
      <h2>{{element.position}}</h2>
    </div>
    <div fxLayout="column" fxLayoutAlign="space-between start" fxFlex="94">
      <ul class="imagelist-ul" (click)="listclick()" [ngClass]="{'isDisabled': !i.checked}">
        <li class="imagelist-label"><strong>{{element.label}}</strong></li>
        <li class="imagelist-totalincl"><strong>Total Inclusion:</strong> {{element.total_inclusion}}</li>
        <li class="imagelist-avg"><strong>Average Probability:</strong> {{element.avg_probability}}</li>
      </ul>
    </div>
    <div fxFlex="5" class="imagelist-chkbox">
        <mat-checkbox color="primary" #i (change)="!i['checked']"></mat-checkbox>
    </div>
  </div>
</td>

И добавить это в cssфайл:

.isDisabled {
    pointer-events: none;
    opacity: 0.5;
}