Angular -> Может ли текст в HTML Select отличаться от того, который пользователь выбрал из раскрывающегося списка? - PullRequest
Новая
       72

Angular -> Может ли текст в HTML Select отличаться от того, который пользователь выбрал из раскрывающегося списка?

2 голосов
/ 14 июля 2020

Я работаю (в проекте Angular) с формой, в которой пользователь выбирает что-то из HTML Select. в приведенном ниже примере «Кошка» и «Собака» являются optgroup (s), а остальные перечисленные вещи являются атрибутами option (s). Мне интересно, можно ли сделать так, чтобы пользователь выбрал из раскрывающегося списка, скажем, вариант «Лев» и текст, который заполняет свернутую версию раскрывающегося списка, чтобы прочитать что-то вроде .. Кот: Лев.

Кот

  • Лев
  • Bobcat Dog
  • Волк
  • Клиффорд

Можно ли это сделать с помощью просто Angular (не jquery)

спасибо!

РЕДАКТИРОВАТЬ:

благодаря помощи комментария shashank sharma я смог понять это. Я использовал приведенный им пример и смог заставить его работать, сделав метку переменной в машинописном тексте, а затем установив эту переменную в функции onCategorySelection

thing.component. html

<mat-label>{{animalKingdom}}</mat-label>

thing.component.ts 

onCategorySelection(event: MatOptionSelectionChange, groupName: string) {
    if (event.isUserInput) {
      this.selected = groupName +  ':' + event.source.viewValue;
     ----->>>> this.animalKingdom = groupName +  ':' + event.source.viewValue;
    }
  }

1 Ответ

0 голосов
/ 14 июля 2020

Решение этой проблемы не может быть выполнено с помощью события selectionChange, мы должны использовать onSelectionChange событие MatOption, которое дает нам информацию о MatOptionGroup.

Например: 

<mat-select>
  <mat-optgroup *ngFor="let group of categoryGroups"
                [label]="group.name">
    <mat-option *ngFor="let category of group.options"
                [value]="category.value" (onSelectionChange)="onCategorySelection($event, group.name)">
       {{category.viewValue}}
    </mat-option>
  </mat-optgroup>

</mat-select>

и Typescript 

onCategorySelection(event: MatOptionSelectionChange, groupName: string) {
    if (event.isUserInput) {
      this.groupName = groupName; 
    }
  }

Я создал для вас рабочий пример здесь .

PS: помните, что onSelectionChanged () запускается не только тогда, когда опция выбрана, но также и тогда, когда она не выбрана, поэтому, если вы используете метку с установленным флажком, где мы выбираем и отменяем выбор, onSelectionChanged () будет срабатывать оба раза (можно обработать с некоторыми проверками).

...