如何更改 angular-material 单选按钮组件？

Question

我试图通过我的代码中的 css 更改组件单选按钮，但它似乎不起作用。

这个组件的正常行为是按钮在左边，标签在右边，我想颠倒这个顺序。我想在我的父组件的左边有标签，在最右边有按钮。

我的 xxx.component.html 中的无线电合成器看起来像这样：

<mat-radio-group
   class="radio-group"
   [(ngModel)]="model">
   <mat-radio-button class="radio-button" *ngFor="let element of list" [value]="element.Id">
        {{element.name}}
   </mat-radio-button>
</mat-radio-group>

chrome 中的无线电组件如下所示：

<mat-radio-group class="mat-radio-group radio-group">
   <mat-radio-button class="mat-radio-button radio-button">
      <label class="mat-radio-label">
         <div class="mat-radio-container">...</div>
         <div class="mat-radio-label-content">...</div>
      </label>
   </mat-radio-button>
   ...
</mat-radio-group>

我尝试更改 class“mat-radio-container”并放置“left:100%!important”，但没有成功。似乎我无法更改 subclasses 的行为，如果我更改我创建的 classes 单选组或单选按钮，我可以对组件产生影响，但我不能根据示例更改 mat-radio-container 或 mat-radio-label-content。

我做的所有测试都在 xxx.component.scss

有人知道如何将此按钮放在右侧或如何仅在此组件中更改此元素的“subclasses”吗？

编辑：我希望标签在父级 div 左侧对齐，按钮在父级 div 右侧对齐，而不是标签在左侧且按钮关闭标签。

Answer 1

既然“element.name”只是那个特定单选按钮的标签，你能把插值放上去吗

{{element.name}}

刚刚离开

<mat-radio-button>

tags，好像可以，看例子供大家参考，

Stackblitz example,

Answer 2

所以我在圣诞老人的帮助下找到了解决方案：

HTML:

          <mat-radio-group
            class="radio-group"
            [(ngModel)]="xxx">
                <div *ngFor="let element of list">
                    <div class="left-radio-button">
                        {{element.name}}
                    </div>
                    <div class="right-radio-button">
                        <mat-radio-button class="radio-button" [value]="element.id">                
                        </mat-radio-button>
                    </div>
                </div>
           </mat-radio-group>

CSS:

.left-radio-button {
  width:95%;
  display: inline-block;
}

.right-radio-button {
  width:5%;
  display: inline-block;
}

如何更改 angular-material 单选按钮组件？

How to change angular-material radio-button components?

css

sass

radio-button

angular-material

angular