Angular:How 为 select 控件中的选项设置 aria-selected Angular

Question

我有一个 select 控件，在 ngFor 中有多个 select true 和 option 元素。现在我想将 aria-selected 设置为 true 如果选项 selected 否则为 false。

Answer 1

一个可能的解决方案是使用循环来检查每个选项是否是所选选项的一部分，如果是，使用 angular [=13] 将 aria-selected 设置为 true =] 模板语法。

这里是 simple Stackblitz example 演示此解决方案。
Select 选项并查看元素是否正确后缀（意味着 aria-selected 设置为 true）。

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

@Component({
  selector: 'my-app',
  template: `
    <p>Pick values and see that aria-selected is set to true</p>
    <select [(ngModel)]="selectedValues" multiple>
      <option *ngFor="let value of values" [ngValue]="value" [attr.aria-selected]="selectedValues.indexOf(value) >= 0">{{value}}</option>
    </select>
  `,
  styles: [
    `
      /* use CSS to add postfix to elements with aria-selected set to true */
      option[aria-selected="true"]::after {
        content : ' aria-selected';
      }
      `,
  ],
})
export class AppComponent {
  values = [
    'value 1',
    'value 2',
    'value 3',
  ];
  selectedValues = [];

  constructor() {
  }
}

Angular:How 为 select 控件中的选项设置 aria-selected Angular

Angular:How to set aria-selected for option in select control for Angular

html

assistive-technology

angular