typescript 将选择选项转换为布尔值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39910835/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
convert a select option to boolean value
提问by Jens
I am learning angular2. Here I have the following Problem:
我正在学习 angular2。在这里，我有以下问题：
I have a selectfield which should work as a boolean value:
我有一个select应该作为布尔值工作的字段：
<select [(ngModel)]="caseSensitive">
<option>false</option>
<option>true</option>
</select>
No if i use it in my Filter it will send as a string not as a boolean. Is it possible to convert it using a converter or something like that:
不，如果我在我的过滤器中使用它，它将作为字符串而不是布尔值发送。是否可以使用转换器或类似的东西来转换它：
Here my complete HTML code:
这是我完整的 HTML 代码：
<input [(ngModel)]="nameFilter"/>
<select [(ngModel)]="caseSensitive">
<option>false</option>
<option>true</option>
</select>
<table>
<tr *ngFor="let p of (persons | MyFilter: nameFilter:caseSensitive); let i = index">
<td>{{i + 1 }} </td>
<td>{{
p.givenName+" "+ p.familyName
}}</td>
<td><img src="/img/flags/{{ p.nationality}}.png"></td>
</tr>
</table>
The ts code:
ts 代码：
import { Component } from '@angular/core';
import {MyFilter} from './MyFilter';
@Component({
selector: 'pizza-root',
pipes: [MyFilter],
templateUrl: 'app.component.html'
})
export class AppComponent {
public year = new Date().getFullYear();
public persons =[{"givenName":"Paul", "familyName": "Smith", "nationality":"american"},
{"givenName":"Jens", "familyName":"myName1", "nationality":"german"},
{"givenName":"Ernst", "familyName":"myName1", "nationality":"german"},
{"givenName":"Jenny", "familyName":"myName1", "nationality":"german"}];
constructor (){
console.log(this.persons);
}
}
The Pipe:
管道：
import { Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'MyFilter'
})
export class MyFilter implements PipeTransform{
transform( items: any[], args: string, caseSensitive : boolean ):any {
if (items != null && args != undefined && args != ''){
if (caseSensitive){
console.log("caseSensitive")
return items.filter(item=>item.givenName.indexOf(args)!== -1);
} else {
console.log("caseInSensitive")
return items.filter(item=> item.givenName.toLowerCase().indexOf(args.toLowerCase())!== -1);
}
}
console.log("else")
return items;
}
}
The Problem is, that the pipe not working correctly because caseSensitiveis the bind as a string not as a boolean value.
问题是，管道无法正常工作，因为caseSensitive绑定是字符串而不是布尔值。
回答by Günter Z?chbauer
By default the values select uses are strings or they are stringified if other types are provided. If you use ngValueinstead, you can use other types and ngModelretains the type.
默认情况下，select 使用的值是字符串，或者如果提供了其他类型，则它们被字符串化。如果ngValue改为使用，则可以使用其他类型并ngModel保留该类型。
<select [(ngModel)]="caseSensitive">
<option [ngValue]="false">false</option>
<option [ngValue]="true">true</option>
</select>
