Angular 命令不起作用的初始菜单项

由于使用函数获取下拉列表的值列表而出现问题，由于使用了函数，由于运行更改检测，总是会创建对<编码>items的新引用.要解决这个问题，只需初始化下拉项一次，您就会注意到我们在命令函数上有一个<编码>event属性，我们可以用它来访问数据和执行操作！

我们可以使用<编码>styleClass来引入一个类来设置菜单的样式

我们可以使用<编码>onDropdownClick来存储活动行，并使用它来执行菜单操作！

编码

<编码>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[];
  activeRow!: Product | null;

  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: (event: any) => {
          console.log(event);
          this.update(this.activeRow);
        },
        styleClass: 'red',
      },
      { label: 'Delete', icon: 'pi pi-fw pi-times', styleClass: 'blue' },
    ];
    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
            (onDropdownClick)="activeRow = product"
            label="Actions"
            [model]="items"
            appendTo="body"
            data-id="product.编码"
          >
          </p-splitButton>
        </td>
        <td>{{ product.编码 }}</td>
        <td>{{ product.name }}</td>
        <td>{{ product.category }}</td>
        <td>{{ product.quantity }}</td>
      </tr>
    </ng-template>
  </p-table>
</div>

Stackblitz Demo