Группа радиокнопок «Угловой материал» - программа чтения с экрана не правильно читает - PullRequest
0 голосов
/ 27 марта 2019

Я использую группу радиокнопок в своем приложении, и она имеет 3 возможных значения.Каждый раз, когда пользователь выбирает значение, программа чтения с экрана читает «1 из 1» вместо «1 из 3».

Я также проверил поведение на веб-сайте Angular, и оно ведет себя так же.

Примеркод: Stackblitz

Браузер: Microsoft Edge Считыватель экрана: Рассказчик

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

Похоже, что вы хотите отобразить проверенное значение, попробуйте обратиться к следующему коду и использовать модель для получения проверенного значения.

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

результат как показано ниже:

enter image description here

Подробнее об использовании метки переключателя, отметьте эту статью .

0 голосов
/ 28 марта 2019

.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'];
}
...