角度材质单选按钮组-屏幕阅读器无法正确阅读

Question

我在我的应用程序中使用单选按钮组，它具有3个可能的值。每当用户选择一个值时，屏幕阅读器就会读取“ 1 of 1”而不是“ 1 of 3”。

我还检查了Angular网站上的行为，并且行为相同。

示例代码：Python 3.6.8 Documentation

浏览器：Microsoft Edge 屏幕阅读器：讲述人

Answer 1

.html

<label id="example-radio-group-label">Pick your favorite season</label>
<mat-radio-group
  aria-labelledby="example-radio-group-label"
  class="example-radio-group"
  [(ngModel)]="favoriteSeason">
  <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
    {{season}}
  </mat-radio-button>
</mat-radio-group>
<div>Your favorite season is: {{favoriteSeason}}</div>

.ts

import {Component} from '@angular/core';

/**
 * @title Radios with ngModel
 */
@Component({
  selector: 'radio-ng-model-example',
  templateUrl: 'radio-ng-model-example.html',
  styleUrls: ['radio-ng-model-example.css'],
})
export class RadioNgModelExample {
  favoriteSeason: string;
  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];
}

Answer 2

似乎您要显示检查值，请尝试参考以下代码并使用Model获取检查值。

<mat-radio-group [(ngModel)]="rdoSeason" aria-label="Select an option">
  <mat-radio-button [value]="1">Option 1</mat-radio-button>
  <mat-radio-button [value]="2">Option 2</mat-radio-button>
  <mat-radio-button [value]="3">Option 3</mat-radio-button>
</mat-radio-group>
<div>You select Option: {{rdoSeason}}</div>

.ts文件中的代码：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-material-radiobutton',
  templateUrl: './material-radiobutton.component.html',
  styleUrls: ['./material-radiobutton.component.css']
})
export class MaterialRadiobuttonComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  rdoSeason:string;
}

结果如下：

有关使用单选按钮标签的更多详细信息，请选中this article。