如何在 Angular 2 中绑定 select 输入上的 null？

Question

我正在开发一个 Angular 2 应用程序。这是我的查看代码：

<select [(ngModel)]="obj.MyFlag" name="MyFlag" class="form-control col-sm-6">
    <option [value]="null">N/D</option>
    <option [value]="true">SI</option>
    <option [value]="false">NO</option>
</select>

下面是我的组件代码：

import { Component } from '@angular/core';
import { MyDto } from '../../../interfaces';

@Component({
    selector: 'view',
    template: require('./view.component.html')
})
export class MyComponentComponent {
    public obj: MyDto;

    constructor() {
    }

    public Update() {
        console.log(obj.MyFlag); // It return "null" as string but I need that it is null
    }
}

export class MyDto
{
    public MyFlag: boolean;
}

如果我 select 第一个选项，我需要 obj.MyFlag 的值为 null。实际上 obj.MyFlag 有 "null" 作为字符串。

我该如何解决这个问题？

谢谢

Answer 1

尝试使用 undefined 代替 [value] 绑定。

您还可以将 selected 指令与 ngModel 结合使用，以确保默认未定义的选项。

    <option [value]="undefined" selected>N/D</option>
    <option [value]="true">SI</option>
    <option [value]="false">NO</option>

确保您的 ngModel 值在初始化时未定义。

Answer 2

我已经使用以下语法解决了问题：

<option value>N/D</option>
<option [value]="true">SI</option>
<option [value]="false">NO</option>

如何在 Angular 2 中绑定 select 输入上的 null？

How to bind, in Angular 2, null on select input?

select

typescript

angular2-components