角材料单选按钮标签很难看

Question

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

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

我现在也尝试使用 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

像这样将您的 double myconvert(uint32_t a) { double n = static_cast<double>(std::numeric_limits<uint32_t>::max() - std::numeric_limits<uint32_t>::min()); return static_cast<double>(a) / n; } 包裹在 <mat-label> 中

<span>

将 CSS 样式应用到您的 <span><mat-label>{{ "APPLICATIONS.FACE_DETECTION.BUTTONS.LANGUAGE" | translate }}</mat-label></span> <form>

此外，您可以在 FormControl 初始化中提供默认选中值而不是 HTML 属性 display: flex; align-items: center;

例如

[checked]=true