angular - 如何在 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 (字符串)的值。跳过设置值会导致绑定(bind) 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"。这是为了绑定(bind)一个空选项。
2. 确保在组件 null 中分配 selectedItem，否则它是未定义的并且您的 select 将显示为空/没有默认值选择。