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'）的默认选项？我不能将默认选项放在categories数组中，因为它会搞乱其他代码。我不介意ngModelChange因为我需要在选择时运行自定义代码。这只是我要清理的$event && $event != 'null' ? $event: null部分。

我不能在默认选项上使用[ngValue];它只给我一个值0: null（字符串）。并且跳过设置值导致绑定selectedCategory=null不匹配默认选项，使得在init处取消选择组合框。

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)
    {
        // ...
    }
}

这里要考虑两个重要细节：

在模板中，将默认选项设为null ngModel，如下所示：[ngValue]="null"。这是绑定null选项。
请务必在组件selectedItem中指定null，否则未定义，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>

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

3 个答案: