Question

我有一个界面

export interface IFilterable{
passesFilter(f : string, isFilter: boolean): boolean;
}

我想用它来过滤Angular2管道中的东西。它是这样实现的：

import {IFilterable} from './i-filterable';
import {Contains} from '../helpers/pipe-helpers';

export class Server extends Dto implements IFilterable {
name: string;
hostname: string;
ips: string;
operatingSystem: string;
sitesCount: number;
databasesCount: number;

passesFilter(f: string, isFilter: boolean): boolean {
    console.log('in server');
    if (!f || f === '') return isFilter;
    f = f.toLowerCase();

    return Contains(this.name, f) ||
        Contains(this.hostname, f) ||
        Contains(this.ips, f) ||
        Contains(this.operatingSystem, f);
}
}

包含正在导入的功能。

管道看起来像这样

import { Pipe, PipeTransform } from '@angular/core';
import {Contains} from '../helpers/pipe-helpers';
import {IFilterable} from '../models/i-filterable';

@Pipe({ name: 'serverFilter' })
export class ServerFilterPipe implements PipeTransform {
  transform(values: IFilterable[], search: string, isFilter: boolean):      IFilterable[] {
     console.log(search + ' search' + isFilter + values);
    return values.filter(value => {
    console.log(value.passesFilter);
    return value.passesFilter(search, isFilter)
  });
 }
}

管道中的第二个console.log打印未定义，而passFilter中的第二个也从未被调用。我也得到了错误

TypeError: setting a property that has only a getter

我做错了什么，或者接口在TS中不是真的可用？

编辑：用抽象类实现相同的东西。

export abstract class Dto {
abstract passesFilter(f: string, isFilter: boolean): boolean;
}

服务器

import {Dto} from './dto';
import {Contains} from '../helpers/pipe-helpers';

export class Server extends Dto {
name: string;
hostname: string;
ips: string;
operatingSystem: string;
sitesCount: number;
databasesCount: number;

passesFilter(f: string, isFilter: boolean): boolean {
    console.log('in server');
    if (!f || f === '') return isFilter;
    f = f.toLowerCase();

    return Contains(this.name, f) ||
        Contains(this.hostname, f) ||
        Contains(this.ips, f) ||
        Contains(this.operatingSystem, f);
}
}

管

import { Pipe, PipeTransform } from '@angular/core';
import {Dto} from '../models/dto';

@Pipe({ name: 'serverFilter' })
export class ServerFilterPipe implements PipeTransform {
transform(values: Dto[], search: string, isFilter: boolean): Dto[] {
console.log(search + ' search' + isFilter + values);
return values.filter(value => {
  console.log(value.passesFilter);
  return value.passesFilter(search, isFilter)
});
 }
}

管辅助细胞

export function Contains(val: string, cmp: string) {
    return val ? val.toLowerCase().indexOf(cmp) >= 0 : false;
}

Answer 1

我们没有看到您输入的管道..也许values不是来自IFilterable类型的？无论如何，我会在使用它之前检查值..也许它在第一轮管道中未定义..

@Pipe({ name: 'serverFilter' })
export class ServerFilterPipe implements PipeTransform {
   transform(values: IFilterable[], search: string, isFilter: boolean): IFilterable[] {
      console.log(search + ' search' + isFilter + values);
      if (!values || !values.length) return []; // check that input !

      return values.filter(value => {
         if (!value || !value.passesFilter) return false; // check that value !

         console.log(value.passesFilter);
         return value.passesFilter(search, isFilter)
      });
   }
}

给你一个暗示：

if (!f || f === '') return isFilter;

此检查是多余的。!''是真的。

<强>更新

检查此弹射器：https://plnkr.co/edit/IhM4rKqD3VvEZVBdimzK?p=preview

Typescript：实现接口时未定义方法

1 个答案: