переключатель угловой матовый материал угловой на несколько нажатий - PullRequest
Новая
       5

переключатель угловой матовый материал угловой на несколько нажатий

0 голосов
/ 04 декабря 2018

Как я могу очистить <mat-radio-button>, выбранный при втором щелчке (после того, как он уже выбран)

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

Любая помощь?

Мой код выглядит как: 

<mat-radio-group name="WasFamilyMemberPresent">
    <mat-radio-button *ngFor="let item of lookupNoYes" [value]="item.Code" >
       {{item.Desc}}
    </mat-radio-button>
</mat-radio-group>

Ответы [ 3 ]

0 голосов
/ 04 декабря 2018

Я не уверен, какой ответ вы ищете, так как по умолчанию для радиокнопок угловой материал разрешен только один выбранный элемент.(Это то, что я предполагаю, что вы спрашиваете, основываясь на вашем вопросе)

Вы пытаетесь создать поведение, при котором пользователь может отменить выбор всех переключателей?

0 голосов
/ 04 декабря 2018

Для этого можно выполнить следующее.

Назначить ссылку на шаблон для кнопки #button и передать ее методу компонента (click)="checkState(button)"

 <mat-radio-button #button class="example-radio-button" *ngFor="let season of seasons" [value]="season" (click)="checkState(button)">

Создать локальныйпеременная в компоненте для сохранения значения кнопки для сравнения в checkState()

 currentCheckedValue = null;

DI Renderer2 для удаления фокуса с кнопки 

 constructor(private ren: Renderer2) { }

Обтекание логики в setTimeout для ее установкив цикле дайджеста проверьте, существует ли локальная переменная и равно ли текущее значение значению аргумента ... если true, отмените выбор, удалите фокус и пустую локальную переменную ... иначе установите локальную переменную для будущего сравнения. 

checkState(el) {
    setTimeout(() => {
      if (this.currentCheckedValue && this.currentCheckedValue === el.value) {
        el.checked = false;
        this.ren.removeClass(el['_elementRef'].nativeElement, 'cdk-focused');
        this.ren.removeClass(el['_elementRef'].nativeElement, 'cdk-program-focused');
        this.currentCheckedValue = null;
        this.favoriteSeason = null;
      } else {
        this.currentCheckedValue = el.value
      }
    })
  }

Stackblitz

https://stackblitz.com/edit/angular-c37tsw?embed=1&file=app/radio-ng-model-example.ts

0 голосов
/ 04 декабря 2018

Я думаю, вам нужно <mat-radio-group> Вы можете взглянуть на этот пример, который я сделал на stackblitz: https://stackblitz.com/edit/angular-gciurb

...