Angular 2，选择选项问题

Posted 2023-02-16

【中文标题】Angular 2，选择选项问题

【英文标题】：Angular 2, select option issue

【发布时间】：2018-05-13 06:56:57

【问题描述】：

在 Angular 2 中，我创建了一个带有动态选项（本例中为类别）的选择（下拉菜单）和一个调用函数以创建新类别的选项，该新类别被添加到选择选项列表中（即下拉菜单） -下拉菜单）。

  <md-select name="categories" (change)="categoryChanged($event)" [(ngModel)]="selectedCategory" floatPlaceholder="never" #categorySelect>
    <md-option (click)=openAddCategoryDialog(proj)>Add Category</md-option>
    <md-option *ngFor="let curr of proj['data'][0].Category" [value]="curr">curr.name</md-option>
  </md-select>

当我从选择下拉列表中选择“添加类别”并创建一个新类别时，我希望选择显示之前在选择字段中显示的值。在这种情况下，它目前不显示任何内容。如果我在其他值之间切换，则会显示所选类别。

如何在选择“添加类别”时使选择显示先前选择的类别？

【问题讨论】：

我认为最好将添加类别功能移出选择。您遇到的问题是因为当您单击添加类别时，您正在更改选择的值。

【参考方案1】：

一种可能的解决方案是禁用Add Category 选项

<md-option (click)=openAddCategoryDialog(proj) disabled>Add Category</md-option>

这将确保下拉菜单不会更改为Add Category，但同时仍会触发点击事件以添加新类别。这是一个 stack blitz 演示这个。

---

根据我的评论，这个功能感觉很奇怪，就像一种解决方法。我建议将添加类别功能从选择中移出。

【讨论】：

我知道这是一个奇怪的功能，但它是某种要求。谢谢您的回答。我的功能现在按预期工作。 :)