Primeng MenuItem 的命令不起作用

Question

我已经创建了一个表格组件，我正在为每行添加一个拆分按钮并尝试调用该函数，但不起作用

这是我用来创建菜单项的函数

getItems(rowData: any): MenuItem[] {
  const items: MenuItem[] = [
  {
      label: 'Edit', icon: 'pi pi-fw pi-check', command: () => this.update(rowData)
  },
  { label: 'Delete', icon: 'pi pi-fw pi-times' }];
    return items;
  }

  update(employee: any): void {
    this.isEditMode = true;
    this.addEmployee = true;
    this.employee = { ...employee };
}

这是我在组件中调用它的方式

<app-prime-table [data]="data" [columns]="columns" [customBodyTemplate]="customBodyTemplate"
                [globalFilters]="columns" [displayFilter]="true">
            </app-prime-table>
            <ng-template #customBodyTemplate let-rowData>

                <tr>
                    <td *ngFor="let col of columns">
                        <div *ngIf="col.type == 'button' && rowData.isActive">
                            <!-- <button pButton pRipple icon="pi pi-pencil" (click)="update(rowData)"
                                class="p-button-rounded p-button-primary mr-1"></button>
                            <button pButton pRipple icon="pi pi-trash" (click)="delete(rowData)"
                                class="p-button-rounded p-button-danger"></button> -->
                        <p-splitButton label="Actions" [model]="getItems(rowData)" appendTo="body">
                        </p-splitButton>
                        </div>
                        <div *ngIf="!col.type">{{rowData[col.field]}}</div>
                        <div *ngIf="col.type == 'date'">{{formatDate(rowData[col.field])}}</div>
                    </td>
                </tr>
            </ng-template>

我可以看到这些项目，但无法对其执行任何操作

Answer 1

问题的出现是由于使用函数来获取下拉列表的值列表，由于使用函数，由于运行更改检测，始终会创建对

items

的新引用。要解决这个问题，只需初始化下拉项一次，您会注意到我们在命令函数上有一个偶数属性，我们可以使用它来访问数据并执行操作！

代码

import { Component, OnInit } from '@angular/core';
import { Product } from '../../domain/product';
import { ProductService } from '../../service/productservice';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'table-basic-demo',
  templateUrl: 'table-basic-demo.html',
})
export class TableBasicDemo implements OnInit {
  products!: Product[];
  items: MenuItem[];

  constructor(private productService: ProductService) {}

  ngOnInit() {
    this.items = this.getItems();
    this.productService.getProductsMini().then((data) => {
      this.products = data;
    });
  }

  getItems(): MenuItem[] {
    const items: MenuItem[] = [
      {
        label: 'Edit',
        icon: 'pi pi-fw pi-check',
        command: (data) => this.update(data.item),
      },
      { label: 'Delete', icon: 'pi pi-fw pi-times' },
    ];
    return items;
  }

  update(employee: any): void {
    alert(JSON.stringify(employee));
  }
}

html

<div class="card">
  <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }">
    <ng-template pTemplate="header">
      <tr>
        <th>Actions</th>
        <th>Code</th>
        <th>Name</th>
        <th>Category</th>
        <th>Quantity</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>
          <p-splitButton label="Actions" [model]="items" appendTo="body">
          </p-splitButton>
        </td>
        <td>{{ product.code }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.category }}</td>
        <td>{{ product.quantity }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

Stackblitz 演示