PrimeNG : p-splitButton onClick event dosen't work everytime

Question

I am using PrimNG 9 with Angular 8, I implemented p-splitButton in the body of p-table, when I click on Edit or Delete the click sometimes works and sometimes doesn't work. Anyone can help please! (See the screen below)

Html:

<p-splitButton label="Show details" styleClass="split-button"
                            (onClick)="showDetails(project)" appendTo="body" [model]="itemsSplitButton(project)">
                        </p-splitButton>

Ts:

itemsSplitButton: any;

ngOnInit() {
    this.initItemsSplitButton();
}

initItemsSplitButton() {
    this.itemsSplitButton = (project) => {
      return [
        {
          label: 'Edit', icon: 'pi pi-pencil', command: () => {
console.log('Edit was clicked);},
{
          label: 'Delete', icon: 'pi pi-trash', command: () => {
console.log('Delete was clicked);};}]}

Answer 1

Try with this code

<p-splitButton label="Save" icon="pi pi-plus" (onClick)="save('info')" [model]="items"></p-splitButton>

export class SplitButtonDemo implements OnInit {

    items: MenuItem[];

    constructor(private messageService: MessageService) {}

    ngOnInit() {
        this.items = [
            {label: 'Update', icon: 'pi pi-pencil', command: () => {
                this.update();
            },
            {label: 'Delete', icon: 'pi pi-trash', command: () => {
                this.delete();
            }
        ];
    }

    save(severity: string) {
        this.messageService.add({severity:severity, summary:'Success', detail:'Data Saved'});
    }

    update() {
        this.messageService.add({severity:'success', summary:'Success', detail:'Data Updated'});
    }

    delete() {
        this.messageService.add({severity:'success', summary:'Success', detail:'Data Deleted'});
    }
}