I've been struggling with a particular issue for the past few days and I just can't seem to find a solution anywhere. Context: I currently have a TypeScript class that is defined like this:
export class Client extends Person {
claimNumber: string;
policyNumber: string;
address: string;
insuranceCompany: Organisation = new Organisation();
toString(): string {
return this.policyNumber
.concat(this.claimNumber);
}
}
This class serves as a model that drives an Angular 5 template. In my component, I use Angular 5's HttpClient to fetch a list of clients from a remote API and generate HTML table rows based on them. The line of code responsible for generating the table rows is:
<tr *ngFor="let client of clients | filter:searchString"> ... </tr>
The searchString mentioned above is a property bound to a search input tag while the filter is a custom filter Pipe defined in the following way:
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()));
}
}
Main Issue: When I inspect item.toString() within the filter pipe, it returns [object Object] instead of a string composed of policyNumber and claimNumber.
Investigation Process: To solve this problem, I conducted a thorough investigation by instantiating the Client class as shown below:
let c = new Client();
c.policyNumber = 'ababababa';
c.claimNumber = 'aaaaaaa';
console.log('client toString() returns => ' + c.toString());
Interestingly, the console.log output was: 'ababababaaaaaaaa'.
Seeking Help: Why does the item.toString() method in the filter pipe yield [object Object], whereas the toString() function on a manually instantiated class gives the correct string?