PrimeNG SplitButton: How to pass an argument to the sub-menu?-CodePudding

I try to use a PrimeNG SplitButton.

@Component({
  selector: 'test',
  template: `
  
  <ul>
    <li *ngFor="let l of lst">{{ l }}
        <p-splitButton label="foo" (onClick)="foo (l)" [model]="menu"></p-splitButton>
    </li>
  </ul>
`
})


export class TestComponent
{
    lst : string [] = ["abc", "123", "xyz"];
    menu : MenuItem [] = [{label: "bar", command: (e) => { this.bar (e) }}];

    foo (x)
    {
        console.log ("foo", x);
    }
    
    bar (x)
    {
        console.log ("bar", x);
    }
}

How can I pass the value of the iteration of lst (l) to bar? I want use it the same way as I do it with foo but not sure how to get the argument down to menu.

CodePudding user response：

You can use the onDropdownClick event to store the index of the splitButton you're currently opening and then use it inside bar, like this:

@Component({
  selector: 'test',
  template: `
  <ul>
    <li *ngFor="let l of lst">{{ l }}
        <p-splitButton label="foo" (onClick)="foo(l)" (onDropdownClick)="dropdownClickHandler(l)" [model]="menu"></p-splitButton>
    </li>
  </ul>
`
})
export class TestComponent
{
    lst : string [] = ["abc", "123", "xyz"];
    menu : MenuItem [] = [{label: "bar", command: () => { this.bar() }}];

    currentIndex: number;

    foo (x)
    {
        console.log("foo", x);
    }
    
    bar ()
    {
        console.log("bar", this.currentIndex);
    }

    dropdownClickHandler(index) {
        this.currentIndex = index;
    }
}

CodePudding user response：

I figured out this.

<p-splitButton label="foo" (onClick)="foo (l)" [model]="getMenu (l)"></p-splitButton>



getMenu (x):any
{
    return [{label: "bar", command: (e) => { this.bar (x) }}];
}

Is it bad style to cover it with a function in Angular??