Снимите флажок всегда - PullRequest
Новая
       101

Снимите флажок всегда

2 голосов
/ 24 марта 2020

Я использую флажок, и я надеюсь, что он никогда не проверяется.

Я использовал функцию для этого, но она не работает, если вы установите флажок несколько раз, он активен (проверен).

Как я могу оставить его всегда без проверки?

DEMO

.TS 

check: boolean = false;

change(e){
  this.check = false
}

. HTML

<ul class="mdc-image-list my-image-list" style="margin-top:120px;padding-left: 10px;padding-right: 10px;">
    <ng-container *ngFor="let product of data; let  j = index;">
        <li class="mdc-image-list__item">
            <div class="mdc-image-list__image-aspect-container">
                        <img [src]="product.image" class="mdc-image-list__image">
            </div>
            <div class="mdc-image-list--with-text-protection">
                <div class="mdc-image-list__supporting mdc-image-list__supporting">
                    <span class="mdc-image-list__label">{{product.name}}</span>
                </div>
                <div class="Info">
                    <dx-check-box (onValueChanged)="change($event);" [(value)]="check"></dx-check-box>
                </div>
            </div>
        </li>
    </ng-container>
</ul>

Проблема

enter image description here

Ответы [ 2 ]

1 голос
/ 24 марта 2020

Привязка [ngModel] может использоваться для отображения значения check и обработки события (ngModelChange) для обработки изменения: 

<dx-check-box [ngModel]="check" (ngModelChange)="change($event)"></dx-check-box>

В обработчике события:

  1. Установите новое значение check
  2. Обнаружение принудительного изменения путем вызова ChangeDetectorRef.detectChanges
  3. Установите значение check обратно на false
change(value) {
  this.check = value;
  this.changeDetectorRef.detectChanges();
  this.check = false;
  ...
}

См. этот стек для демонстрации.

0 голосов
/ 24 марта 2020

Я пробовал просто 

<dx-check-box [value]="false"></dx-check-box>

Но для меня это не сработало.

Кажется, это ошибка или что-то в этом роде.

Варианты обхода:

  1. <dx-check-box [value]="false" [disable]="true"></dx-check-box> - работает и выглядит немного по-другому, но вы можете настроить некоторые стили в css, чтобы он выглядел так, как будто он не отключен

  2. закрасить прозрачным div над флажком, он предотвращает нажатие input

...