Отменить выбор эффекта Radio Material2 Angular 5 - PullRequest
Новая
       8

Отменить выбор эффекта Radio Material2 Angular 5

0 голосов
/ 26 апреля 2018

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

Я сделал простой пример.Вы можете воспроизвести его, выбрав «aa», затем нажмите кнопку «>>».

HTML 

<mat-radio-group class="example-radio-group" [(ngModel)]="radioSelected">
    <mat-radio-button *ngFor="let option of tempSublist" [value]="option" class="example-radio-button" color="primary">
        {{option}}
    </mat-radio-button>
</mat-radio-group>
<hr>
<button (click)="prev()"><<</button>
<button (click)="next()">>></button>

Машинопись 

list = [
    ['aa','bb','cc'],
    ['cc','aa','bb'],
    ['bb','cc','ee'],
    ['dd','bb','cc'],
  ];
  index = 0;
  tempSublist = this.list[this.index];
  radioSelected:string;

  next(){
    if(this.index < this.list.length){
      this.radioSelected = null;
      this.index++;
      this.tempSublist = this.list[this.index];
    }
  }

  prev(){
    if(this.index >= 1){
      this.radioSelected = null;
      this.index--;
      this.tempSublist = this.list[this.index];
    }
  }

https://stackblitz.com/edit/angular-7s9qvs?file=app%2Fradio-ng-model-example.html

Как я могу решить это?

1 Ответ

0 голосов
/ 26 апреля 2018

Добавление опции trackBy в ngFor помогает уменьшить переход между двумя состояниями.Также отключение репплеров с помощью [disableRipple] = "true", по-видимому, уменьшает визуальный эффект:

HTML 

<mat-radio-button [disableRipple]="true" *ngFor="let option of tempSublist;
                                                           trackBy: trackByFn" ...>
 ...

Машинопись 

next() {
if (this.index < this.list.length - 1) {
                         //add this ^
...

trackByFn(index, item) {
    return index; 
}

Я подумал, что было бы неплохо добавить элемент управления для кнопок навигации: 

<button [disabled]="index <= 0" (click)="prev()"><<</button>
          ^- this
<button [disabled]="index === tempSublist.length" (click)="next()">>></button>
         ^- this

Демо

Если этого недостаточно, при последнем обращении спрячьте и покажите весь блок.Оберните его в div и установите ngIf: 

<div *ngIf="isVisible">
    <mat-radio-group class="example-radio-group" [(ngModel)]="radioSelected">
...

и используйте тайм-аут в классе по нажатию кнопки: 

  next() {
    isVisible = true;

    this.isVisible = false;
    if (this.index < this.list.length - 1) {
     ...
    }
    setTimeout(() => this.isVisible = true, 30)
  }

Demo

...