将select选项转换为boolean值

Question

我正在学习angular2.这里我有以下问题:

我有一个select字段应该作为一个布尔值:

<select [(ngModel)]="caseSensitive">
    <option>false</option>
     <option>true</option>
   </select>

不,如果我在我的过滤器中使用它,它将作为字符串发送而不是作为布尔值.是否可以使用转换器或类似的方式转换它:

这是我完整的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>

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

管道:

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

}

问题是,管道无法正常工作,因为caseSensitive绑定为字符串而不是布尔值.

Answer 1

默认情况下,值选择使用的是字符串,或者如果提供了其他类型,则将它们字符串化.如果使用ngValue,则可以使用其他类型并ngModel保留该类型.

  <select [(ngModel)]="caseSensitive">
    <option [ngValue]="false">false</option>
     <option [ngValue]="true">true</option>
   </select>