Array von Methoden funktioniert nicht ionisch 2

Question

Ich arbeite an ionischen 2. Ich habe ein Menü für meine Seite und eine Reihe von Inhalten für das Menü erstellt.

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

Und Elemente hinzugefügt.

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

Und ich rufe Methoden zur Laufzeit.

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

Aber nichts passiert. Methoden werden nie aufgerufen.

Wenn ich dies tun console.log(item.method) zeigt es nie Körper, zeigt nur Methoden Namen.

gleiche Ergebnis, wenn ich versuchte Interpolation d

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

Helfen Sie mir Jungs.

Hier ts Datei

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

Hier Vorlagendatei

<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

Sie setzen method Eigenschaft als String Darstellung eines Verfahrens Aufruf. Es ruft die Methode nicht tatsächlich auf, weil es ein Zeichenfolgenliteral ist. Die Zielfunktion (zB: this.editAccount) kann mit Hilfe der Pfeilfunktion eingestellt werden (zB: ()=>this.editAccount()) oder durch bind() mit zB: this.editAccount.bind(this);

Versuchen Sie, wie Sie diese Einstellung:

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 Ihrer Vorlage Aufruf als:

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