时间戳

首页 > 解决方案 > 有没有办法在 Angular 中隐藏 mat-radio-button 并使其内部的图像可点击？

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

问题描述

到目前为止，这就是它的样子我试图隐藏单选按钮并使用男性和女性的图像代替。这是 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;
}

为了选择性别，我该怎么做才能只显示图像？

标签： htmlangularsassmaterial-table

解决方案

请在您的组件 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;
}

这将只显示图像，功能将保持不变。所选项目的值仍然可以在 formControlName 中访问gender。

推荐阅读