有没有办法隐藏 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;
}

我该怎么做才能只显示图片以便 select 性别？

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

这将只显示图像，功能将保持原样。所选项目的值仍然可以在 formControlName gender.

中访问

Answer 2

如果有更多的单选按钮那么你可以通过class名称隐藏它们

<mat-radio-group class="only-image" [(ngModel)]="gender" >
  <mat-label>
    <mat-radio-button class="female-radio" value="M"></mat-radio-button>
    <img (click)="genderChange('M')"
      width="100"
      src="https://image.shutterstock.com/image-vector/male-sign-flat-illustration-vector-600w-1483957736.jpg"
    />
  </mat-label>
  <mat-label>
    <mat-radio-button class="female-radio" value="F"></mat-radio-button>
    <img
    (click)="genderChange('F')"
      width="100"
      src="https://image.shutterstock.com/image-illustration/male-icon-clipping-path-600w-135680966.jpg"
    />
  </mat-label>
</mat-radio-group>

// css

.female-radio {
   display: none;
 }

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

Is there a way to hide the mat-radio-button in Angular and make the image inside it clickable instead?

html

angular

sass

material-table