선택 옵션을 부울 값으로 변환합니다.

Question

angular2를 배우고 있습니다. 난 내 필터에 사용하는 경우

가

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

아니 그렇지 부울과 같은 문자열로 보내드립니다 :

내가 부울 값으로 작동해야 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은 문자열로 바인드되지 않으므로 파이프가 올바르게 작동하지 않는다는 문제점이 있습니다. boolean 치

Answer 1

기본적으로 값 선택 용도는 문자열이거나 다른 유형이 제공되면 문자열로 표시됩니다. ngValue을 대신 사용하는 경우 다른 유형을 사용할 수 있으며 ngModel은 유형을 유지합니다.

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