Angular 6: Как скрыть радиокруг с помощью Angular Material и использовать NgStyle для проверенного ответа?

Question

У меня проблемы с двумя вещами:

1. Скрыть круги группы мат-радио
2. Измените фон тега p на синий, если отмечено

Я пытался использовать :: ng-deep для переопределения свойств css и изменения цвета на белый, пытался настроить невидимость: скрытый, но ничего не получалось.Кроме того, я попытался использовать 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

1А.Это то, что я получаю сейчас 1B.И это то, что я хочу 2. Это то, что я хочу получить при проверке радио

Answer 1

Существуют некоторые проблемы с вашими стилями:

• visibility: hidden скрывает содержимое элемента, но не освобождает пространство, в котором блокируются элементы

• .mat-radio-outer-circle видимость устанавливается скрытой, только если опция включена из-за .mat-radio-checked
• , более простой способ отключить пульсацию - этоустановите disableRipple="true" на мат-радиокнопке

1) Как скрыть круги в мат-радиогруппе и отключить пульсации?

Я настроил стиль, как показано ниже:

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

Preview

Checkэтот Stackblitz , который использует оба варианта (ngClass и ngStyle)