如何在Angular 2中将选择选项值设置为null

Question

我有以下标记：

<select [ngModel]="selectedCategory" 
     (ngModelChange)="selectCategory($event && $event != 'null' ? $event : null)">

  <option [value]="null">(all categories)</option>
  <option *ngFor="let cat of categories" [ngValue]="cat">{{cat.name}}</option>

</select>

在 TypeScript 中：

export class MyComp {
    public categories: Category[];
    public selectedCategory: Category;
    public selectCategory(cat: Category) {
        this.selectedCategory = cat;
        doStuff();
    }
}

这看起来不像是正确的方法。是否有任何其他不那么冗长的方法来获取值为 null（不是“null”）的默认选项？我不能将默认选项放在类别数组中，因为它会弄乱其他代码。而且我不介意ngModelChange，因为我需要在选择时运行自定义代码。这只是我想清理的$event && $event != 'null' ? $event: null 部分。

我不能在默认选项上使用[ngValue]；它只是给了我一个0: null（字符串）的值。并且跳过设置值会导致绑定selectedCategory=null 与默认选项不匹配，从而使组合框在初始化时未选中。

Answer 1

虽然 Igors 解决方案不适合我，但我使用的是：

<select [ngModel]="selectedItem" (ngModelChange)="selectItem($event)">
    <option [ngValue]="null">Don't show</option>
    <option *ngFor="let item of items" [ngValue]="item">{{item.text}}</option>
</select>

import { Component, Input } from '@angular/core';
@Component()
export class SelectionComponent {
    @Input() items: any[];
    selectedItem: any = null;
    selectItem(item?: any)
    {
        // ...
    }
}

这里有两个重要的细节需要考虑：

1. 在模板中，使您的默认选项使用null 作为ngModel，如下所示：[ngValue]="null"。这是绑定一个空选项。
2. 确保在组件null 中分配selectedItem，否则它是未定义的并且您的select 将显示为空/没有默认选择。

Answer 2

目前有一个open issue in the github repository 用于此。

我发现这可用于实现与您相同的目标，但代码略少。它还假设您没有使用空字符串作为可能的值，但如果您只是稍微修改它以在条件语句中考虑到这一点。

查看

<select [ngModel]="selectedCategory" 
        (ngModelChange)="selectedCategory = $event ? $event : null">
  <option value="">(all categories)</option>
  <option *ngFor="let cat of categories" [ngValue]="cat">{{cat.name}}</option>
</select>

组件不需要额外的逻辑

export class MyComp {
    public categories: Category[];
    public selectedCategory: Category;
}

如果您仍然想do stuff（参考您的代码示例）进行模型更改，那么您拥有的方法会更适合，但如果您想要的话要做的是将值设置为有效类别或null，如果没有选择单个类别，这将减少代码。

Answer 3

只需使用[value]="undefined"

<select class="form-control" [(ngModel)]="selectedCategory">
    <option [value]="undefined" disabled hidden>Select...</option>
    <option *ngFor="let c of categories">{{c}}</option>
</select>