Angular: Как установить aria-selected для опции в элементе управления select для Angular

Question

У меня есть элемент управления select с множественным выбором true и элементами option в ngFor. Теперь я хочу установить aria-selected на true, если опция выбрана в противном случае на false.

Answer 1

Возможное решение состоит в том, чтобы использовать цикл для проверки каждого параметра, является ли он частью выбранных параметров, и, если да, установить aria-selected в true, используя угловой [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() {
  }
}