我想僅為一個(gè)特定選項(xiàng)創(chuàng)建一個(gè)兩級(jí)單選按鈕。在這里，我編寫了一個(gè)邏輯，將在“Spring”選項(xiàng)下顯示額外的兩個(gè)單選按鈕。但是當(dāng)它被選擇時(shí)，它會(huì)呈現(xiàn)所有選項(xiàng)。對(duì)齊也沒有按預(yù)期發(fā)生。超文本標(biāo)記語言<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>打字稿e(cuò)xport class RadioNgModelExample { favoriteSeason: string; seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn']; climate:string[]=['rainy','hot'];}我想像這樣創(chuàng)作。
2 回答
飲歌長(zhǎng)嘯
TA貢獻(xiàn)1951條經(jīng)驗(yàn) 獲得超3個(gè)贊
您需要再添加一項(xiàng) if 條件檢查
*ngIf="season ==='Spring' && favoriteSeason ==='Spring'"
對(duì)于圖標(biāo)對(duì)齊問題添加下面的 css
為您的 mat-radio-button 元素添加 class="custom-radio-button"
:host ::ng-deep .custom-radio-button .mat-radio-label{
align-items: start;
}
對(duì)于下面評(píng)論中提到的選擇問題，您必須使用 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貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超7個(gè)贊
我認(rèn)為你可以通過使用 nthchild 屬性在組件 css 文件中使用 CSS 來解決這個(gè)問題。在第 n 個(gè)孩子中，您只想在第二個(gè)孩子中顯示這一點(diǎn)。
- 2 回答
- 0 關(guān)注
- 170 瀏覽
添加回答
舉報(bào)
0/150
提交
取消