Tableau de méthodes ne fonctionnant pas ionique 2

Question

Je travaille sur ionique 2. J'ai créé un menu pour ma page et un tableau de contenu pour le menu.

menuItems: Array<{title: string, icon: string, method: any}> 

Et éléments ajoutés.

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

Et j'appelle des méthodes à l'exécution.

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

Mais rien ne se passe. Les méthodes ne sont jamais appelées.

Quand je fais ceci console.log(item.method) il montre jamais le corps, montre seulement des noms de méthodes.

même résultat quand j'ai essayé interpolation dire

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

Aidez-moi les gars.

est ici ts fichier

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

fichier modèle est ici

<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

Vous définissez method propriété comme représentation de chaîne d'une méthode appel. Il n'appelle pas réellement la méthode car il s'agit d'un littéral de chaîne. L'objet de la fonction (par exemple: this.editAccount) peut être réglé en utilisant la fonction de flèche (par exemple: ()=>this.editAccount()) ou en utilisant bind() par exemple: this.editAccount.bind(this);

Essayez de régler comme ceci:

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

Dans votre appel modèle comme:

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