PrimeNG SplitButton如何向子菜单command传递循环迭代参数

你在组件类中全局定义的menu属性会被所有*ngFor渲染出的SplitButton共享，菜单配置里的command回调不在*ngFor的模板上下文作用域中，无法直接获取当前迭代项l的值。

不要提前定义全局共享的菜单配置，改为为每个列表项动态生成独立的菜单实例，通过闭包把当前迭代的l值传入command回调即可，修改后的完整代码如下：

import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'test',
  template: `
  <ul>
    <li *ngFor="let l of lst">{{ l }}
        <p-splitButton label="foo" (onClick)="foo(l)" [model]="buildMenu(l)"></p-splitButton>
    </li>
  </ul>
`
})
export class TestComponent {
    lst: string[] = ["abc", "123", "xyz"];

    // 为当前列表项生成专属菜单配置
    buildMenu(currentItem: string): MenuItem[] {
      return [
        {
          label: "bar",
          command: () => {
            this.bar(currentItem);
          }
        }
      ];
    }

    foo(x: string) {
        console.log("foo", x);
    }
    
    bar(x: string) {
        console.log("bar", x);
    }
}

如果列表数据量较大，担心模板中调用方法频繁触发导致性能问题，可以在组件初始化阶段（比如ngOnInit生命周期里）提前遍历lst数组，生成一个和列表项一一对应的菜单配置数组，模板循环时直接按索引取对应项的菜单配置即可，传参效果完全一致。

内容的提问来源于stack exchange，提问作者chris01