Angular -> HTML Select 中的文本是否可以与用户从下拉列表中选择的不同？

Question

我正在（在一个 Angular 项目中）使用一个表单，用户 select 从 HTML Select 中获取一些东西。在下面的示例中，“Cat”和“Dog”是 optgroup(s)，列出的其他内容是 option(s) 属性。我想知道是否有可能让用户 select 从下拉菜单中说出“Lion”选项，然后填充折叠版本的下拉菜单的文本可以阅读类似 .. Cat: Lion.

猫

狮子
山猫狗
狼
克利福德

是否可以仅使用 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;
    }
  }

Answer 1

这个问题的解决方案无法通过 selectionChange 事件完成，我们必须使用 MatOption 的 onSelectionChange 事件，它为我们提供了 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>

和打字稿

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

我已经为您创建了一个工作示例 here。

PS：记住 onSelectionChanged() 不仅在选项被 selected 时触发，而且在它被 deselected 时触发，所以如果你使用 met select 带有复选框，其中我们 select 和取消选择 onSelectionChanged() 将触发两次（可以通过一些检查来处理）。

Angular -> HTML Select 中的文本是否可以与用户从下拉列表中选择的不同？

Angular -> Can the text in an HTML Select be different than what the user selected from the drop down list?

html

html-select

optgroup

angular