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. 当选择单选按钮时，这是我想要的结果

- Ofir Sasson

Answer 1

您的样式存在一些问题：

• visibility: hidden 将会隐藏元素的内容，但是不会 'free' 元素所占用的空间。

• 只有当选项被选中时, .mat-radio-outer-circle 的可见性才会设置为隐藏，因为它依赖于.mat-radio-checked
• 禁用ripple的更简单的方法是在 mat-radio-button 上设置 disableRipple="true"

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

我已经将样式进行了调整：

::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) 如何在选项被勾选时更改背景？

为了在选项被勾选时更改背景颜色，我已经向li元素添加了ngStyle属性指令，并将所选选项的索引与存储在当前问题的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;
}

预览

查看这个使用ngClass和ngStyle两个变体的Stackblitz

- coreuter