如何更改角度材料单选按钮组件？答案

【问题标题】：How to change angular-material radio-button components?如何更改角度材料单选按钮组件？
【发布时间】：2020-10-29 20:14:11
【问题描述】：

我尝试通过代码中的 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中的radio组件长这样：

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

我尝试更改类“mat-radio-container”并输入“left:100%!important”，但它不起作用。似乎我无法更改子类的行为，如果我更改我创建的类单选组或单选按钮，我可以对组件产生影响，但我无法更改 mat-radio-container 或 mat -radio-label-content 每个示例。

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

有人知道我怎样才能把这个按钮放在右边，或者我怎样才能只在这个组件中改变这个元素的“子类”吗？

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

【问题讨论】：

标签： css angular sass angular-material radio-button

【解决方案1】：

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

{{element.name}}

刚刚离开

<mat-radio-button>

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

Stackblitz example,

【讨论】：

所以我必须在 mat-radio-button 中为 ngFor 创建一个 div，否则我将无法访问 element.name
是的，没错，你能试试吗！
好的，单选按钮现在在右侧，但不在我的 div 的最右侧，也许我没有解释清楚，但我想让标签与 div 的左侧对齐并且按钮与 div 的右侧对齐，即使 div 的宽度为 20000000px :p 使用此解决方案，我的按钮在右侧但靠近标签:(
你可以有一些边距，我加了10px的左边距，stackblitz.com/edit/angular-material-radio-button-demo-znnfvb你能检查一下这是否可以吗？
我的每个单选按钮都在一行上。所以这个方法不会对齐 div 右侧的所有按钮，因为所有内容的大小都不相同，所以我不能放 margin-left: xxx%

【解决方案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;
}

【讨论】：