Array of methods not working ionic 2

问题:

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>

回答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 -->