我正在学习英语.我有以下问题:

我有一个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是作为字符串而不是布尔值的绑定.

推荐答案

<option>中的值是字符串,如果提供了其他类型,则将其字符串化.如果改用ngValue,则可以使用其他类型,而ngModel保留该类型.

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

Typescript相关问答推荐

定义JMX的类型:类型上不存在属性键

如何在不使用变量的情况下静态判断运算式的类型?

Angular 17 -如何在for循环内创建一些加载?

如果在TypeScript中一个原始的类方法是递归的,如何使用类decorator 模式?

泛型函数类型验证

Angular 错误NG0303在Angular 项目中使用app.Component.html中的NGFor

隐式键入脚本键映射使用

有条件地删除区分的联合类型中的属性的可选属性

如何避免推断空数组

对于始终仅在不是对象属性时才抛出的函数,返回Never

React router 6(数据路由)使用数据重定向

确保对象列表在编译时在类型脚本中具有唯一键

在REACT查询中获取未定义的isLoading态

类型判断数组或对象的isEmpty

在Vite中将SVG导入为ReactComponent-不明确的间接导出:ReactComponent

React-跨组件共享功能的最佳实践

如何将元素推入对象中的类型化数组

Typescript 从泛型推断类型

如何通过nx找到所有受影响的项目?

如何使用动态生成的键和值定义对象的形状?