Angular 材质单选按钮 Label 丑

Question

我不知道为什么它实际上看起来如此丑陋，并且与 Angular Material 给出的示例如此不同。

label 与按钮的高度不同，字体大小似乎不同。

我现在也尝试使用mat-label ，但它没有改变任何东西。

HTML：

  <form [formGroup]="audioConfig" style="text-align: center;">
    <mat-label>{{ "APPLICATIONS.FACE_DETECTION.BUTTONS.LANGUAGE" | translate }}</mat-label> 
    <mat-radio-group formControlName="radioButtonLanguage"
      class="example-radio-group">
      <mat-radio-button class="example-radio-button" [checked]="true" value="german">{{ "APPLICATIONS.FACE_DETECTION.BUTTONS.LANGUAGES.GERMAN" | translate }}
      </mat-radio-button>
      <mat-radio-button class="example-radio-button" value="english">{{ "APPLICATIONS.FACE_DETECTION.BUTTONS.LANGUAGES.ENGLISH" | translate }}
      </mat-radio-button>
    </mat-radio-group>
  </form>

在示例中，他们没有做任何不同的事情，但看起来仍然完全不同（ https://material.angular.io/components/radio/examples ）。

Answer 1

像这样将<mat-label>包裹在<span>中

<span><mat-label>{{ "APPLICATIONS.FACE_DETECTION.BUTTONS.LANGUAGE" | translate }}</mat-label></span>

将 CSS Styles 应用于您的<form> display: flex; align-items: center; display: flex; align-items: center;

此外，您可以在 FormControl 初始化中提供默认检查值，而不是 HTML 属性[checked]=true

例如

fb: FormBuilder = new FormBuilder();
audioConfig: FormGroup = this.initAudioConfigFg();

initAudioConfigFg(): FormGroup {
  return this.fb.group({ radioButtonLanguage: this.fb.control('german') });
}