Ionic & Angular: вставка имен функций с помощью ngFor - PullRequest
Новая
       40

Ionic & Angular: вставка имен функций с помощью ngFor

0 голосов
/ 29 сентября 2018

Как я могу вставить вызов функции через * ngFor, в то время как этот вызов приходит как вставленная строка из массива, по которому я перебираю?

Мой массив содержит список действий пользователя, которые описаны ихимена функций (среди прочих).Шаблон содержит часть, которая должна перечислять эти действия для каждой пользовательской записи, используя директиву Ionic ion-fab.Вместо того, чтобы записывать каждое действие, я хочу перебрать список с помощью *ngFor и вставить каждое имя функции в атрибут (click).
Однако мое текущее решение не работает.

Вот мойкод:

Класс 

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)]`

Возможно ли это вообще?
И рекомендуется ли подходить к нему так, как я делаю?

Заранее спасибо!

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

Я рекомендую использовать решение @ user184994, связать контекст this и использовать ссылку, но если вы все еще хотите использовать строки, вы можете получить доступ к методам компонента через this['methodName'](parameter), в моем примере это выглядит как this[a.function](user).

Вот это STACKBLITZ .

0 голосов
/ 29 сентября 2018

Вместо использования строки, вы должны содержать ссылку на функцию, например 

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>

Вот демонстрация StackBlitz

...