Angular2：将输入/选择字符串值解析为强类型值

Question

我现在正在寻找超过一天的时间来获得正确的答案，但我仍然有点无能为力。问题很简单：我有一个带有布尔属性的模型。我将该属性映射到一个选择，它允许用户选择正确的值（真、假或空）。 Angular 实际上是返回一个字符串。具体：

我有以下组件：

@Component({
  selector: 'clientlist',
  templateUrl: './app/components/clientlist/clientlist.html'
})

export class ClientListComponent {  
   searchRequest : ClientSearchRequest;
}

我有以下模板：

<select [(ngModel)]="searchRequest.online" class="form-control" (onchange)="search()" numberBinder>
    <option value="">Select</option>
    <option value="true">Online</option>
    <option value="false">Offline</option>
</select>

以及搜索请求模型类：

export class ClientSearchRequest {
name: string;
online: boolean;
status: string;
page: number;
pageSize: number;

constructor() {
    this.name = "";
    this.online = null;
    this.status = "";
    this.page = 1;
    this.pageSize = 50;
}

}

当我让模型被填充时，在线字段设置为一个字符串（“true”）。如何解决这个问题？什么是不创建额外组件等的正确方法。

Answer 1

我会尝试使用 ngValue 指令。这样，您将能够使用对象而不是字符串作为值：

<select [(ngModel)]="searchRequest.online" class="form-control" 
        (onchange)="search()" numberBinder>
  <option [ngValue]="'null'">Select</option>
  <option [ngValue]="true">Online</option>
  <option [ngValue]="false">Offline</option>
</select>

使用null 值不起作用，因此您需要解决此问题。有关详细信息，请参阅此问题：

• Angular2 select with ngValue null