parsing - Angular 2 : Parse input/select string value into strong typed value

Question

我现在已经搜索了一天多才能得到正确的答案，但我还是有点一头雾水。问题很简单:我有一个模型，它的属性是 boolean 值。我将该属性映射到一个选择，它允许用户选择正确的值(true、false 或 null)。 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