Ionic & Angular：使用 ngFor 插入函数名称

Question

我如何通过 *ngFor 插入一个函数调用，而这个调用是从我正在迭代的数组中插入的字符串？

我的数组包含一个用户操作列表，这些操作由它们的函数名称（以及其他）描述。该模板有一部分应使用 Ionic 的 ion-fab 指令为每个用户条目列出这些操作。我不想写下每个操作，而是想使用 *ngFor 遍历列表并将每个函数名称插入到 (click) 属性中。
不过，我目前的解决方案不起作用。

这是我的代码：

Class

constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    private usersProv: Users
) {
    this.userActions = [
        {
            'label'     : 'Edit',
            'function'  : 'editUser',
            'icon'      : 'ios-create-outline',
            'color'     : 'primary'
        },
        {
            'label'     : 'Remove',
            'function'  : 'removeUser',
            'icon'      : 'ios-trash-outline',
            'color'     : 'yellow'
        },
        {
            'label'     : 'Send message',
            'function'  : 'sendMessageToUser',
            'icon'      : 'ios-send-outline',
            'color'     : 'secondary'
        }
    ];
    console.info('userActions', this.userActions);
}

模板

<ion-fab right>
    <button ion-fab mini color="light">
        <ion-icon name="ios-arrow-dropleft"></ion-icon>
    </button>
    <ion-fab-list side="left">
        <div *ngFor="let action of userActions">
            <button ion-fab mini color="{{action.color}}" title="{{action.label}}" (click)="action.function(user)">
                <ion-icon name="{{action.icon}}"></ion-icon>
            </button>
        </div>
    </ion-fab-list>
</ion-fab>

这是我得到的错误：

ERROR TypeError: "_v.context.$implicit.function is not a function"

插入大括号 ((click)="{{action.function}}(user)") 也无济于事。那么错误是：

`ERROR Error: "Uncaught (in promise): Error: Template parse errors: Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{action.function}}(user)]`

这可能吗？
以我现在的方式处理它是否值得推荐？

提前致谢！

Answer 1

您应该保留对函数的引用，而不是使用字符串，就像这样

userActions = [
    {
        'label'     : 'Edit',
        'function'  : this.editUser.bind(this),
        'icon'      : 'ios-create-outline',
        'color'     : 'primary'
    },
    {
        'label'     : 'Remove',
        'function'  : this.removeUser.bind(this),
        'icon'      : 'ios-trash-outline',
        'color'     : 'yellow'
    },
    {
        'label'     : 'Send message',
        'function'  : this.sendMessageToUser.bind(this),
        'icon'      : 'ios-send-outline',
        'color'     : 'secondary'
    }
];

这里我使用的是bind，所以我们在调用函数时不会丢失this的上下文。

然后，在你的HTML中，你可以这样称呼它：

<button (click)="a.function(user)">{{a.label}}</button>

Here is a StackBlitz demo

Answer 2

我建议使用@user184994 的解决方案，绑定 this 上下文并使用引用，但如果您仍想使用字符串，您可以通过 this['methodName'](parameter) 访问组件的方法，在我的例如它看起来像 this[a.function](user)。

这里是STACKBLITZ.

Ionic & Angular：使用 ngFor 插入函数名称

Ionic & Angular: Inserting Function Names with ngFor

arrays

angular

ionic-framework

ngfor

function-call