Question

我正在研究离子2.我已经为我的页面创建了一个菜单，并为菜单创建了一系列内容。

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>

但没有任何反应。方法永远不会被调用。

当我执行此操作console.log(item.method)时，它从不显示正文，只显示方法名称。

当我尝试插值时的结果相同，即

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

Answer 1

您正在将method属性设置为方法调用的字符串表示形式。它实际上并不调用该方法，因为它是一个字符串文字。可以使用箭头函数（例如：this.editAccount）或使用()=>this.editAccount()来设置函数对象（例如：bind()），例如：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的方法

1 个答案: