Question

我正在使用mat-radio-button（material2），我有类似测验的东西。当我选择答案并进入下一个测验时，在第二个测验中会显示取消选择的视觉效果。如果第一个测验中的选定选项也出现在第二个测验中，在同一个位置或之后出现，则会发生这种情况。

我做了一个简单的例子。您可以选择“aa”重现它，然后点击“＆gt;＆gt;”按钮。

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

我该如何解决这个问题？

Answer 1

在ngFor上添加trackBy选项有助于减少两种状态之间的转换。同时使用[disableRipple] =“true”禁用repples似乎会降低视觉效果：

<强> 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

<强> Demo

如果这还不够，在最后的追索权中，隐藏并展示整个街区。将其包装在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

取消选择效果Radio Material2 Angular 5

1 个答案: