如何在Angular对象数组内部执行函数

Question

mentioned below:

users = [
    {
        name: 'Test User',
        onSelected: function (par1, par2) {
            // some operation with par1, par2
            alert('Test User');
        }
    },
    {
        name: 'Test User 2',
        onSelected: function (par1, par2, par3) {
            // some operation with par1, par2, par3
            alert('Test User 2');
        }
    },
    {
        name: 'Test User 3',
        onSelected: () => {
            this.router.navigate(['/some/path', 12])
                    .then();
        }
    }
];

I pass this array to my child component with the help of inputs decorator, as shown below, app.component.html:

<render-users [users]='users' (selectedUser)="selectedUserManager($event)"></render-users>

Now Am able to emit the selected user using Output and Event Emitter , as shown below,

render-users.component.html:

<div 
 *ngFor="let user of users" 
 (click)="setSelectedUser(user)">
</div>

render.component.ts:

setSelectedUser(user: User): void {
 this.selectedUser.emit(user);
}

My question is how do I execute a function inside the selected Object? Here, I can call $event.onSelected() in app.compoent.ts file as show below,

app.component.ts:

selectedUserManager($event) {
    $event.onSelected()
}

But in the case of a different function parameter, how do manage without switch case inside app.component.ts

In NgFor Loop whenever I select any particular user, the function attached to onSelected Key should be executed.

Here I can't use a switch case mechanism, instead, I have to execute the function of that selected user.

In a more specific word is there any way I can get a callback within the same array object?

Stackblitz Demo

If I have left put out any extra details please let me know and thanks in advance.

Answer 1

forked your stackbliz

https://stackblitz.com/edit/angular-memv6o?file=src%2Findex.html

Passed three parameters and all are not required in function defination