Angular 6 : How to hide radio circle using Angular Material and use NgStyle for checked answer?

Question

我在两件事上遇到了麻烦:

1. 隐藏mat-radio-group的圈子
2. 如果选中，将 p 标签背景更改为蓝色

我尝试使用::ng-deep 覆盖 css 属性并将颜色更改为白色，尝试配置 invisibility:hidden 但没有成功。此外，我尝试使用 ngStyle 将 p 标签的背景颜色配置为蓝色(如果选中)，但它不起作用。

这是 HTML:

<div class="container-fluid">
  <header class="lesson-heading" *ngIf="currentQuestion">
    <span class="title"></span>
    <h2>Question {{currentIndex + 1}}/{{quiz.questions.length}}</h2>
  </header><!-- end lesson-heading -->
  <div class="question-block">
    <form #quizForm="ngForm" (ngSubmit)="onSubmit()">
      <h4>{{currentQuestion.question}}</h4>
      <div class="form-group">
        <mat-radio-group [(ngModel)]="userAnswers[currentIndex]" name="answer" class="form-control">
          <ul class="items answers-list">
            <li><mat-radio-button [value]=1><p>1. {{currentQuestion.answer1}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=2><p>2. {{currentQuestion.answer2}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=3><p>3. {{currentQuestion.answer3}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=4><p>4. {{currentQuestion.answer4}}</p></mat-radio-button></li>
          </ul>
        </mat-radio-group>
      </div>
    </form>
  </div>
</div>

和 SASS 文件:

/*click effect color change*/
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element
  background-color: white !important
  visibility: hidden !important

/*inner circle color change*/
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle
  background-color: white !important
  visibility: hidden !important

/*outer ring color change*/
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle
  background-color: white !important
  visibility: hidden !important

1A。这就是我现在得到的 1B.这就是我想要的 2.这就是我想在 radio 被检查时得到的

Answer 1

你的样式有一些问题:

• visibility: hidden 将隐藏元素的内容，但不会“释放”元素阻挡的空间

• .mat-radio-outer-circle 的可见性仅在由于 .mat-radio-checked
选中该选项时才设置为隐藏
• 禁用波纹的更简单方法是在 mat-radio-button 上设置 disableRipple="true"

1)如何隐藏mat-radio-group的圆圈并禁用波纹？

我已经将样式调整如下:

::ng-deep .mat-radio-button .mat-radio-container {
  width: 0;
}
::ng-deep .mat-radio-container .mat-radio-outer-circle,
::ng-deep .mat-radio-container .mat-radio-inner-circle {
  border: none;
  width: 0;
}

并将 disableRipple="true" 添加到 mat-radio-button

<mat-radio-button disableRipple="true" [value]="answer.value">

2) 如果勾选了一个选项，如何改变背景？

对于选中的选项的背景颜色，我已将 ngStyle 属性指令添加到 li 元素，并将所选选项的索引与存储在当前问题的 userAnswers 中的值进行比较:

<li [ngStyle]="{'background-color':userAnswers[currentIndex] === i+1?'blue':'transparent'}"> ... </li>

为了让它工作，我不得不稍微修改一下 html(如果你在循环中创建你的选项，你可以节省几行代码，并且很容易一次禁用所有选项的涟漪) :

<li class="answer" 
  [ngStyle]="{'background-color':userAnswers[currentIndex] === i+1?'blue':'transparent'}" 
  *ngFor="let answer of currentQuestion.answers; let i = index">

  <mat-radio-button disableRipple="true" [value]="answer.value">
    <p>{{ i+1 }}. {{ answer.text }}</p>
  </mat-radio-button>
</li>

或者，您也可以使用 ngClass 而不是 ngStyle。只需添加

[ngClass]="{'active': userAnswers[currentIndex] === i+1}"

到 li 元素而不是 ngStyle 指令并添加以下样式定义

.answer.active {
  background: lightblue;
}

预览

看看这个 Stackblitz它使用两种变体(ngClass 和 ngStyle)