Array of methods not working ionic 2 - arrays

Question

I'm working on ionic 2. I've created a menu for my page and an array of contents for menu.
menuItems: Array<{title: string, icon: string, method: any}>
And added elements.
this.menuItems =
[
{title: "Edit Account", icon: "create", method: "editAcount()"},
{title: "Change Password", icon: "create", method: "changePassword()"},
{title: "LogOut", icon: "log-out", method: "logOut()"},
];
And I'm calling methods at run-time.
<ion-item *ngFor = "let item of menuItems" menuClose (click) = "item.method"> <!--like this-->
{{item.title}}
<ion-icon item-end name = "{{item.icon}}"></ion-icon>
</ion-item>
But nothing happens. Methods never get called.
When I do this console.log(item.method) it never shows body, only shows methods names.
same result when I tried interpolation i.e.
<ion-item *ngFor = "let item of menuItems" menuClose (click) = "item.method">
{{item.title}} {{item.method}}<!--methods names only-->
<ion-icon item-end name = "{{item.icon}}"></ion-icon>
</ion-item>
Help me guys.
Here's ts file
import { Component } from '#angular/core';
import { IonicPage, NavController, NavParams, ViewController, MenuController } from 'ionic-angular';
import { HomePage } from "../home/home";
import { EditUsersProvider } from "../../providers/edit-users/edit-users";
import { FlashMessageProvider } from "../../providers/flash-message/flash-message";
#IonicPage()
#Component(
{
selector: 'page-user-account',
templateUrl: 'user-account.html',
})
export class UserAccountPage
{
userContents;
menuItems: Array<{title: string, icon: string, method: any}>;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController,
private editUser: EditUsersProvider,
private flashMsg: FlashMessageProvider,
public menuCtrl: MenuController)
{
menuCtrl.enable(true, "menu");
this.userContents = this.navParams.data;
this.menuItems =
[ //Problem might be here.
{title: "Edit Account", icon: "create", method: "editAcount()"},
{title: "Change Password", icon: "create", method: "changePassword()"},
{title: "LogOut", icon: "log-out", method: "logOut()"},
];
}
editAcount()
{
console.log("It never triggers");
}
changePassword()
{
console.log("It never triggers");
}
logOut()
{
console.log("It never triggers");
}
}
Here's template file
<ion-menu #menu id = "menu" [content] = "content">
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item *ngFor = "let item of menuItems" menuClose (click) = "item.method"> <!--this never executes -->
{{item.title}}
<ion-icon item-end name = "{{item.icon}}"></ion-icon>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>

Answer 1

You are setting method property as a string representation of a method call.
It doesn't actually call the method because it is a string literal. The function object (eg: this.editAccount) can be set using arrow function (eg: ()=>this.editAccount())or by using bind() e.g: this.editAccount.bind(this);
Try setting like this:
this.menuItems =
[ //Problem might be here.
{title: "Edit Account", icon: "create", method: () => this.editAcount()},
{title: "Change Password", icon: "create", method: () => this.changePassword()},
{title: "LogOut", icon: "log-out", method: () => this.logOut()},
];
In your template call as:
<ion-item *ngFor = "let item of menuItems" menuClose (click) = "item.method()"> <!--this will execute -->