angular - Hur man skickar argument i PrimeNG:s SplitButton?

Det här är min MenuItem-array:

this.ButtonItems = [
  {label: 'Edit', icon: 'fa fa-pencil-alt', command: (x) => {
      this.onEditDocument(x);
  }},
  {label: 'Duplicate', icon: 'pi pi-times', command: (x) => {
      this.onDuplicate(x);
  }}
];

Båda funktionerna behöver en parameter av typen sträng (item.id).

Här är min mall:

<p-splitButton 
    label="Save" 
    icon="i-btn fa fa-search" 
    title="View document"
    (onClick)="onViewDocument(item.id)" 
    [model]="ButtonItems(item.id)"></p-splitButton>

Koden kompilerar inte. Jag försökte följa det här exemplet men jag förstår det inte. Hur kan jag få detta rätt?

UPPDATERING:

Min delade knapp finns bredvid varje objekt i följande tabell:

<p-table 
    [value]="currentDocuments" 
    [responsive]="true" 
    [columns]="cols" 
    [paginator]="true" 
    [rows]="10" 
    [showCurrentPageReport]="true" 
    styleClass="p-datatable-responsive-demo" 
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                <div class="header-no-overflow">{{col.header}}</div>
            </th>
            <th style="width: 60px;"></th>            
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-item let-columns="columns">
        <tr>
            <td *ngFor="let col of columns" >
                <span class="p-column-title">{{col.header}}</span>
                <div *ngIf="col.type != 'File Uploader'">
                    {{item[col.field]}}
                </div>
                <div *ngIf="col.type == 'File Uploader'">
                    <div *ngFor="let file of item[col.field]">
                        <a [href]="file.downloadUrl" target="_blank">{{file.name}} </a>
                    </div>
                </div>
            </td>
            <td>
                <ng-container *ngFor="let buttonItem of ButtonItems">
                    <p-splitButton 
                        label="Save" 
                        icon="i-btn fa fa-search" 
                        title="View document"
                        (onClick)="onViewDocument(item.id)" 
                        [model]="buttonItem(item.id)"
                    ></p-splitButton>
                </ng-container>
            </td>
        </tr>
    </ng-template>
</p-table>

Jag lade till detta här för att förklara mitt scenario mer i detalj.

Min menypost ser ut så här:

this.ButtonItems = [
      [{ label: 'Edit', icon: 'fa fa-pencil-alt', command: (x: string) => this.onEditDocument(x) }],
      [{ label: 'Duplicate', icon: 'pi pi-times', command: (x: string) => this.onDuplicateDocument(x) }]
    ];

Jag vill lägga till delade knappar på varje artikel i tabellen. De två knapparna (redigera och duplicera) bör flyttas till artiklar i delad knapp. Här är en bild som illustrerar vad jag menar:

Svar #1

Jag försökte andra lösningar men de fungerade inte! så jag måste hitta en egen lösning för att lösa detta problem. Saken är den att split-knappen har två händelser "onClick" och "onDropdownClick", den andra händelsen kommer att triggas innan kommandofunktionen för knappalternativen körs! så jag sätter mitt önskade värde på den händelsen (jag menar onDropDownClick) och sedan när jag anropar kommandofunktionen har jag det värdet. Titta på min kod, och du kommer definitivt att bättre förstå vad jag pratar om.

 <p-splitButton
                class="w-100"
                [label]="'SHARED.EDIT' | translate"
                [title]="'PRODUCTS.EDIT_PRODUCT' | translate"
                icon="pi pi-eye"
                (onClick)="editProduct(item.id)"
                [model]="recordMenuItems"
                (onDropdownClick)="handleActionsClick(item)"
              >
              </p-splitButton>

 public selectedProductForExecutingAction: any = null;

  public handleActionsClick(product) {
    this.selectedProductForExecutingAction = product;
  }

  public recordMenuItems: MenuItem[] = [
    {
      label: 'Copy',
      icon: 'pi pi-copy',
      command: (event) => {
        this.copy(this.selectedProductForExecutingAction.id);
      }
    },
    {
      label: 'Delete Product',
      icon: 'pi pi-times',
      command: (event) => {
        this.deleteProduct(this.selectedProductForExecutingAction);
      }
    }
  ];

Svar #2

Så med mitt specifika scenario här är lösningen:

mall :

<td>
        <p-splitButton appendTo="body" label="Save" icon="pi pi-check" (onClick)="onViewDocument(item.id)" [model]="buttonActions[item.id]"></p-splitButton>
</td>

.ts:

buttonActions: {[id:string]: MenuItem[]} = {};  
  
this.currentDocuments.forEach(el => {
  this.buttonActions[el.id as string] = [
    {label: 'View', icon: 'pi pi-refresh', command: () => {
        this.onViewDocument(el.id as string);
    }},
    {label: 'Edit', icon: 'pi pi-times', command: () => {
        this.onEditDocument(el.id as string);
    }},

];
})

Relaterade artiklar