Многоуровневая кнопка радио

Question

Я хочу создать двухуровневый переключатель только для одной конкретной опции. Здесь я написал логи c, в которой под опцией «Spring» будут отображаться две дополнительные радиокнопки. Но когда он выбран, он рендеринг для всех вариантов. Выравнивание также не происходит, как ожидалось.

HTML

<mat-radio-group class = "radio-group"[(ngModel)]="favoriteSeason">
 <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
    {{season}}
    <mat-radio-group class = "radio-group" *ngIf="favoriteSeason ==='Spring'">
      <mat-radio-button class="example-radio-button" *ngFor="let season of climate" [value]="season">
      {{season}}
       </mat-radio-button>
    </mat-radio-group>
  </mat-radio-button>
</mat-radio-group>

Машинопись

export class RadioNgModelExample {
  favoriteSeason: string;
  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
  climate:string[]=['rainy','hot'];
}

Я хочу создать вот так.

Answer 1

Вам нужно добавить еще одну проверку, если условие

*ngIf="season ==='Spring' && favoriteSeason ==='Spring'"

Для проблемы выравнивания значков добавьте ниже css

Добавьте class = "custom-radio-button" для вашего мата -radio-button element

:host ::ng-deep .custom-radio-button .mat-radio-label{
  align-items: start;
}

И для проблемы выбора, упомянутой в комментарии ниже, вы должны настроить css с помощью CSS селекторов для mat-radio-button, чтобы удовлетворить ваши требования. Пример кода, как показано ниже:

::ng-deep.custom-radio-button.mat-accent.mat-radio-checked  >label >div > .mat-radio-outer-circle {
       border-color:blue!important; /*outer ring color change*/
  }
   ::ng-deep.custom-radio-button.mat-accent.mat-radio-checked  >label >div > .mat-radio-inner-circle {
       background-color:blue!important; /*outer ring color change*/
  }

::ng-deep.custom-radio-button.mat-accent .mat-radio-inner-circle{
   background-color:#fff!important; 
}

::ng-deep.custom-radio-button.mat-accent .mat-radio-outer-circle{
   border-color:rgba(0,0,0,.54)
}
::ng-deep.custom-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle
{
   border-color:rgba(0,0,0,.54)
}

Answer 2

Я думаю, что вы можете решить эту проблему, используя CSS в файле компонента css, используя свойство nthchild. В nth child дайте, что вы хотите показать это только у вашего 2-го ребенка.