多级单选按钮

Question

我只想为一个特定选项创建一个两级单选按钮。在这里，我编写了一个逻辑，将在 '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"

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

对于下面评论中提到的选择问题，您必须使用 CSS 选择器为 mat-radio-button 自定义 css 以满足您的要求。示例代码如下：

::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 属性。在第 n 个 child 中，您只想在第 2 个 child 中显示此内容。

多级单选按钮

Multi level radio button

html

javascript

typescript

angular

angular6