html - 有没有办法隐藏 Angular 中的 mat-radio-button 并使其内部的图像可点击？

Question

This is how it looks till now我试图隐藏单选按钮并使用男性和女性的图像。这是 mat-radio-group 的 html 代码:

   <mat-radio-group formControlName="gender">
            <mat-label>
              <mat-radio-button class="female-radio" value="M"></mat-radio-button>
              <img width="100" src={{imageTwo}}>
              </mat-label>
              <mat-label>
                <mat-radio-button class="female-radio" value="F"></mat-radio-button>
                <img width="100" src={{imageOne}}>
              </mat-label>
          </mat-radio-group>

在我的 scss 组件中我做了:

.female-radio + img {
  cursor: pointer;
}

.mat-radio-checked + img {
  outline: 2px solid #f00;
}

如何才能仅显示图像以选择性别？

Answer 1

请在您的组件 html 中进行以下更改

<mat-radio-group formControlName="gender">
  <mat-label>
    <mat-radio-button class="female-radio" value="M">
      <img width="100" src={{imageTwo}}>
    </mat-radio-button>
    </mat-label>
    <mat-label>
      <mat-radio-button class="female-radio" value="F">
        <img width="100" src={{imageOne}}>
      </mat-radio-button>
    </mat-label>
</mat-radio-group>

并将以下 css 添加到 css/scss 文件

:host ::ng-deep .mat-radio-container {
  display: none;
}

这将仅显示图像，功能将保持原样。所选项目的值仍然可以在表单ControlName gender 中访问。