選択オプションをブール値に変換する

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がバインドではなく、パイプが正しく機能しないという問題があります。 sはブール値です。

Answer 1

デフォルトでは、値の選択用途は文字列であるか、他の種類が指定されている場合は文字列になります。 ngValueを代わりに使用する場合は、他のタイプを使用でき、ngModelはそのタイプを保持します。

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