如何在 PrimeNG 的 SplitButton 中传递参数？

Question

这是我的 MenuItem 数组：

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);
  }}
];

两个函数都需要一个字符串类型的参数 (item.id)。

这是我的模板：

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

代码无法编译。我试图遵循 this 示例，但我不明白。我怎样才能做到这一点？

更新：

我的拆分按钮在以下每个项目的旁边 table:

<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>

我在这里添加这个是为了更详细地解释我的场景。

我的 MenuItem 看起来像这样：

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) }]
    ];

我想在 table 中的每个项目上添加拆分按钮。这两个按钮（编辑和复制应该移动到拆分按钮中的项目。这是一张图片来说明我的意思：

Answer 1

在链接示例中，属性 model 绑定到一个函数，这实际上是个坏主意。在默认的更改检测策略设置中，可能会为每个更改检测周期调用该函数。

在您的情况下，您可能必须遍历 ButtonItems 数组。

<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"
  ></p-splitButton>
</ng-container>

更新

每个菜单项都需要是一个数组而不是一个对象。

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) }]
];

Answer 2

所以我的具体情况是解决方案：

模板：

<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);
    }},

];
})

如何在 PrimeNG 的 SplitButton 中传递参数？

How to pass argument in PrimeNG's SplitButton?

typescript

primeng

angular

更新