一系列不工作离子2的方法 [英] Array of methods not working ionic 2

问题描述

我正在研究离子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}>

添加元素。

this.menuItems =
        [
            {title: "Edit Account", icon: "create", method: "editAcount()"},
            {title: "Change Password", icon: "create", method: "changePassword()"},
            {title: "LogOut", icon: "log-out", method: "logOut()"},
        ];

我在运行时调用方法。

<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.

当我这样做 console.log（item.method）它从不显示正文，只显示方法名称。

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>

帮助我们。

这是 ts 文件

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");
    }
}

这是模板文件

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

推荐答案

您正在设置方法 property作为方法调用的字符串表示。
它实际上并不调用该方法，因为它是一个字符串文字。可以使用箭头函数设置函数对象（例如： this.editAccount ）（例如：（）=> this.editAccount（））或使用 bind（）例如： this.editAccount.bind（this）;

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);

尝试这样设置：

 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()},
    ];

在模板中调用：

<ion-item *ngFor = "let item of menuItems" menuClose (click) = "item.method()"> <!--this will execute -->

这篇关于一系列不工作离子2的方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！