如何更改有角度的材质单选按钮组件

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>

镀铬的无线电组件看起来像这样：

<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>

我试着改变班级"；垫子无线电容器"；并将"；左：100%！"重要"；但它不起作用。似乎我不能改变子类的行为，如果我改变我创建的类无线电组或无线电按钮，我可以对组件产生影响，但我不能改变每个例子的mat无线电容器或mat无线电标签内容。

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

有人知道我如何把这个按钮放在右边吗；子类"；是否仅在此组件中包含此元素？

edit：我希望标签在父div的左边对齐，按钮在父div右边对齐，而不是标签在左边，按钮靠近标签。

Answer 1

由于，"element.name"；只是那个特定单选按钮的标签，你能把插值放进去吗

{{element.name}}

就在的左边

<mat-radio-button>

标签，它似乎起作用，请参阅示例以供参考，

Stackblitz示例，

Answer 2

所以我在Santa的帮助下找到了解决方案：

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;
}