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

Question

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

Answer 1

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

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