html - Angular：如何在 Angular 的选择控件中为选项设置 aria-selected

Question

我在 ngFor 中有一个带有多选 true 和选项元素的选择控件。现在我想将 aria-selected 设置为 true 如果选项被选择为 false 。

Answer 1

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

这是一个演示此解决方案的简单 Stackblitz 示例。
选择选项并查看元素是否正确后缀（意味着 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() {
  }
}