Angular 6:如何使用Angular Material隐藏单选圆并使用NgStyle来检查答案? [英] Angular 6: How to hide radio circle using Angular Material and use NgStyle for checked answer?

问题描述

我在两件事上遇到麻烦:

I'm having trouble with two things:

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

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

I've tried using ::ng-deep to override css properties and change colors to white, tried to configure invisibility:hidden but none worked. Also, I tried to use ngStyle to configure that the background color of p tag will be blue if checked but it didn't work.

这是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.这是我在检查收音机时想要得到的

1A. This is what I get now 1B. And this is what I want 2. This is what I want to get when radio is checked

推荐答案

您的样式存在一些问题:

There are some problems with your styles:

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

• visibility: hidden will hide the contents of the element, but won't 'free' the space the element blocks

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

• .mat-radio-outer-circle's visibility is set to hidden only if the option is checked due to .mat-radio-checked
• an easier way to disable the ripple is to set disableRipple="true" on the mat-radio-button

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

我已经调整了如下样式:

I've adjusted the styling like below:

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

and added disableRipple="true" to the mat-radio-button

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

2)如果选中一个选项，如何更改背景?

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

To the background color of an option if it's checked, I've added the ngStyle attribute directive to the li elements and compared the index of the selected option with the value stored in userAnswers for the current question:

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

为了使其正常工作，我不得不对html进行了一些修改(如果您在循环中创建选项，则可以保存几行代码，并且很容易一次禁用所有选项的波动) :

In order for that to work, I've had to modify the html a bit (if you create your options in a loop you can save a few lines of code and it's easy to disable the ripple for all options at once):

<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.只需添加

Alternatively you could ngClass instead of ngStyle as well. Just add

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

添加到li-element而不是ngStyle指令，并添加以下样式定义

to the li-element instead of the ngStyle directive and add the following style definition

.answer.active {
  background: lightblue;
}

预览

查看此 Stackblitz ，它使用了两种变体(ngClass和ngStyle)

Check out this Stackblitz which uses both variants (ngClass and ngStyle)

这篇关于Angular 6:如何使用Angular Material隐藏单选圆并使用NgStyle来检查答案?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！