Angular 6：如何使用 Angular Material 隐藏无线电圆圈并使用 NgStyle 来检查答案？

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.这是我在检查无线电时想要得到的

Answer 1

您的样式存在一些问题：

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

• .mat-radio-outer-circle仅当由于以下原因选中该选项时， 的可见性才会设置为隐藏.mat-radio-checked
• 禁用波纹的一种更简单的方法是在mat-radio-buttondisableRipple="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-element 而不是 ngStyle 指令并添加以下样式定义

.answer.active {
  background: lightblue;
}

预览

看看这个Stackblitz，它使用了两种变体（ngClass 和 ngStyle）