在自定义typescript类中重写javascript对象toString（）

在过去的几天里，我一直在处理一个问题&我似乎在任何地方都找不到解决办法。 背景： 我有一个typescript类，定义如下：

export class Client extends Person {
    claimNumber: string;
    policyNumber: string;
    address: string;
    insuranceCompany: Organisation = new Organisation();

    toString(): string {
        return this.policyNumber
            .concat(this.claimNumber);
    }
}

export class FilterPipe implements PipeTransform {
    transform(items: Client[], term: string) {               
        if (term == undefined || term === '') return items;
        return items.filter(item =>item.toString().toLocaleLowerCase().includes(term.toLocaleLowerCase()));
    }
}

let c = new Client();
c.policyNumber = 'ababababa';
c.claimNumber = 'aaaaaaa';
console.log('client toString() is => ' + c.toString());

以上用作驱动角度5模板的模型。在我的组件中，我从远程api获取（使用angular 5HttpClient）客户端列表并生成html表行。生成表行的LOC为：

<tr *ngFor="let client of clients | filter:searchString"> ... </tr>

问题： 当我在上面的过滤器管道中检查item.toString（）时，它返回[object object]，而不是由policyNumber和&claimNumber组成的字符串

调查： 我对这个问题的研究如下：我实例化了客户机类，如下所示：

export class Client extends Person {
    claimNumber: string;
    policyNumber: string;
    address: string;
    insuranceCompany: Organisation = new Organisation();

    toString(): string {
        return this.policyNumber
            .concat(this.claimNumber);
    }
}

export class FilterPipe implements PipeTransform {
    transform(items: Client[], term: string) {               
        if (term == undefined || term === '') return items;
        return items.filter(item =>item.toString().toLocaleLowerCase().includes(term.toLocaleLowerCase()));
    }
}

let c = new Client();
c.policyNumber = 'ababababa';
c.claimNumber = 'aaaaaaa';
console.log('client toString() is => ' + c.toString());

有趣的是，上面的console.log输出：“abababaaaaaaaaaa”

问题：

---

我做错了什么导致过滤管道中的item.toString（）返回[object object]，而我实例化的类上的toString（）返回正确的字符串？

解决问题的方法是将方法重命名为非内置方法名，就像搜索字符串一样。还值得将控制台日志添加到您的筛选函数中，以确保您确实在那里获得了

客户端。实际上，您可能会得到一个不同的对象。
如果您从Web服务（或类似服务）获得客户机，您只会得到普通json对象。如果您说接收到的对象属于
客户机类型
，则typescript会将它们显示为此类对象，但只有属性相同，方法将不是来自
客户机类，而是来自
对象
类

从服务器检索后，您可能希望将它们实例化为真正的客户端对象：

publicMyServiceMethod（）{
返回此.http.get（…）.map（plainClients=>{
const realClients:Array=（plainClients | |[]）.map（plainClient=>{
让realClient=newclient（）；
realClient.claimNumber=plainClient.claimNumber；
realClient.policyNumber=plainClient.policyNumber；
realClient.address=plainClient.address；
返回realClient；
});
返回真实客户；
})
}

您可能更喜欢使用类型为接口的贫血对象，并使用实用功能以字符串形式检索客户端，以避免出现以下情况：

导出接口人{
...
}
导出接口客户端扩展个人{
索赔编号：字符串；
policyNumber:字符串；
地址：字符串；
保险公司：机构；
}
//在某个功利主义阶级
公共静态getClientInfo（客户端：客户端）{
返回client.policyNumber.concat（client.claimNumber）；
}
//在你的烟斗里
返回items.filter（item=>getClientInfo（item）.toLocaleLowerCase（）.includes（term.toLocaleLowerCase（））；

我不是说在你的应用程序中只使用贫血类，但是如果某类对象被传递，并且可能会被序列化，那么使用贫血对象可以避免像你现在这样的问题。
而不是检查过滤器中的item.toString（），你检查过策略和索赔编号了吗？数据是如何来自API的？看起来怎么样？可能是重复的我想你的问题的解决方案在。非常感谢你分享链接，他们为我的问题找到了解决方案做出了巨大贡献。是的，我假设他正在将每个客户端实例化为客户端类的一个实例。Typescript绝对不会帮你这么做。非常感谢你，这对理解根本问题有很大帮助&有助于设计问题的解决方案。非常感谢&愿你得到所有的祝福。