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

6qftjkof 于 2023-01-27 发布在 TypeScript

关注(0)|答案(4)|浏览(168)

这是我的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的例子，但我不明白它。我怎么才能得到这个权利？

- 更新日期：**

我的拆分按钮位于下表中每个项目的旁边：

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

我在这里添加了这一点，以便更详细地解释我的场景。
我的菜单项看起来像这样：

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

我想在表中的每个项上添加拆分按钮。两个按钮（编辑和复制）应该移动到拆分按钮中的项。下面的图像说明了我的意思：

typescript

来源：https://stackoverflow.com/questions/67467595/how-to-pass-argument-in-primengs-splitbutton

4条答案

按热度按时间

z2acfund1#

在链接的示例中，属性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) }]
];

赞(0）回复(0）举报 2023-01-27

2ic8powd2#

这对我来说太清楚了。

xxx.html
<p-splitButton icon="pi pi-print" label="Imprimir"
(onClick)="imprimirFactura(rowData)" [model]="cmds(rowData)"></p-splitButton>

//xxx.componente.ts
    cmds(row): any {
        const items = [
            {
                label: 'Acción 1', 
                icon: 'pi pi-clone', command: () => {
                    this.dummy(row);
                }
            },
            {
                label: 'Acción 2', 
                icon: 'pi pi-clone', command: () => {
                    this.confirmarPagoFactura(row);
                }
            },
        ];
        return items; (x); }}];   
    }

赞(0）回复(0）举报 2023-01-27

laawzig23#

对于我的特定场景，解决方案如下：
模板：

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

];
})

赞(0）回复(0）举报 2023-01-27

b4wnujal4#

我尝试了其他的解决方案，但是他们不起作用！所以我必须找到自己的解决方案来解决这个问题。事情是这样的，拆分按钮有两个事件“onClick”和“onDropdownClick”，第二个事件将在执行按钮选项的命令函数之前被触发！所以我在那个事件上设置我想要的值（我的意思是onDropDownClick），然后当我调用命令函数时，我就有了那个值。看看我的代码，你肯定会更好地理解我在说什么。

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

赞(0）回复(0）举报 2023-01-27

我来回答

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

4条答案

更新

相关问题

热门标签

最新问答