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

默认情况下，select使用的值是字符串，或者如果提供其他类型，则将它们字符串化。如果您改为使用ngValue，则可以使用其他类型，并ngModel保留该类型。

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

将select选项转换为boolean值

1 个答案: