Question

我现在正在寻找一天以获得正确的答案，但我还是有点无能为力。问题很简单：我有一个带有属性的模型，它是一个布尔值。我将该属性映射到select，允许用户选择正确的值（true，false或null）。 Angular实际上是返回一个字符串。要具体：

我有以下组件：

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

export class ClientListComponent {  
   searchRequest : ClientSearchRequest;
}

我有以下tempalte：

<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;
}

}

当我让模型填满时，在线字段设置了一个字符串（＆＃34; true＆＃34;）。如何解决这个问题？没有创建额外组件等的正确方法是什么。

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

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

1 个答案: