如何在Angular 5中将组件的类方法动态分配给（单击）

Question

I am new to angular. I am using angular 5. I know you can do something like this

<div (click)=foo()>click me</div>

for angular to call the foo() method in the component's class when the element is clicked. What if you want to pass methods to (click) dynamically, that is, you don't know what will be assigned to (click) when the view is being built like is happening below

<ul>
    <li *ngFor="let item of items" (click)=item.action>item.name</li>
</ul>

lets assume that the items array looks like this

let items = [
    {name: 'Smith', action: 'add'},
    {name: 'Paul', action: 'delete'}
]

I want a click on the li element containing Smith to call the add() method and a click on the one containing Paul to call the delete() method. How do I achieve this?

Answer 1

You can try this

let items = [
    {name: 'Smith', action: () => { console.log('add');} },
    {name: 'Paul', action: () => { console.log('delete');} }
]


<ul>
    <li *ngFor="let item of items" (click)="item.action()">items.name</li>
</ul>

even you can have argument in your functions for example

    {name: 'Smith', action: (somearg) => { console.log('add', somearg);} },

    <li *ngFor="let item of items" (click)="item.action(argvalue)">items.name</li>