我想僅為一個特定選項創建一個兩級單選按鈕。在這里，我編寫了一個邏輯，將在“Spring”選項下顯示額外的兩個單選按鈕。但是當它被選擇時，它會呈現所有選項。對齊也沒有按預期發生。超文本標記語言<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'];}我想像這樣創作。
2 回答
飲歌長嘯
TA貢獻1951條經驗 獲得超3個贊
您需要再添加一項 if 條件檢查
*ngIf="season ==='Spring' && favoriteSeason ==='Spring'"
對于圖標對齊問題添加下面的 css
為您的 mat-radio-button 元素添加 class="custom-radio-button"
:host ::ng-deep .custom-radio-button .mat-radio-label{
align-items: start;
}
對于下面評論中提到的選擇問題，您必須使用 mat-radio-button 的 CSS 選擇器自定義 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)
}
aluckdog
TA貢獻1847條經驗 獲得超7個贊
我認為你可以通過使用 nthchild 屬性在組件 css 文件中使用 CSS 來解決這個問題。在第 n 個孩子中，您只想在第二個孩子中顯示這一點。
- 2 回答
- 0 關注
- 183 瀏覽
添加回答
舉報
0/150
提交
取消