I recently created an interface that includes variables and a function.
However, I encountered an issue when trying to utilize the implemented function for a specific class as it resulted in an 'ERROR TypeError: ...getPrice is not a function"
Below is the structure of the class and interface:
export interface Charge {
code: string;
name: string;
getPrice: (category: string) => number;
}
export class StorePrice implements Charge {
code: string;
name: string;
getPrice(category: string): number {
return 234;
}
}
The corresponding component is outlined below:
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
charges: Charge[];
constructor() {
this.charges = [
{
code: "125",
name: "apple"
} as StorePrice,
];
}
asStorePrice(charge: Charge) {
return charge as StorePrice;
}
}
Within the HTML file where the function is utilized:
<div>
<div *ngFor="let charge of charges">
{{asStorePrice(charge).getPrice()}}
</div>
</div>