I have a component that displays a list of items and triggers an action when a user clicks on a specific item. This is the basic functionality I am aiming for. Below is the HTML template I am using:
template: `
<ul class="list" *ngFor="let item of items">
<li>(click)="onItemClick(item.id)"</li>
</ul>
`,
Here is my TypeScript code:
export class Item {
id: string;
name: string;
}
export class ListComponent {
let items: Map<string, Item>;
public onItemClick(id: string) {
console.log(id);
let item = items.get(id); //this fails to find anything as id for some reason happens to be number.
processItem(id)
}
private processItem(id: string) {
//some work
}
}
To address the issue, I have resorted to the following in the HTML:
<li>(click)="onItemClick(''+item.id)"</li>
Adding an empty string before the item ID forces Angular to treat it as a string instead of a number. However, this workaround feels cumbersome. I was under the impression that Angular would handle type conversion appropriately when binding function parameters.
Has anyone else encountered this problem? I am currently using Angular 5.2.1 with Typescript 2.4.2.