如何将对象传递给 material-menu 操作？

Question

我需要将对象传递给 material-menu 操作。

在某些情况下，我使用 material-list 和 material-list-item。每个项目都有一个菜单 material-menu.

当我 select 菜单选项时，我想传递相应的项目以在 action:

上的方法中使用

以下列表示例：

这里是模板（部分）：

<material-list>
    <div *ngFor="let item of iniciativas">
        <material-list-item  class="shadow-box-list-item" elevation="2">
            <div>
                <h4>{{item.nome}}</h4>
                <material-progress class="width-300" [activeProgress]="25"></material-progress><span> 25%</span>
                <p>{{item.descricao}}</p>
           </div>
            <span class="material-list-item-secondary">
                <material-menu [menu]="menuModel">
                </material-menu>
            </span>
        </material-list-item>
    </div>
</material-list>

这里是 Dart 代码（部分）：

final MenuModel<MenuItem> menuModel = new MenuModel([new MenuItemGroup([new MenuItem('Editar', action: () => navegarParaItensTrabalho(null)), new MenuItem('Excluir', action: () => excluirItensTrabalho(null))])], icon: new Icon('menu'));

我希望有一些方法可以将 DOM 参数传递给与 MenuItem 上的 action: 关联的函数，但我没有找到它。

Answer 1

这样做的方法是在构建 menuModel 时传入上下文（项目），并让 menuModel 具有上下文而不是共享相同的实例。

您可以通过两种方式执行此操作：

有一个方法可以在给定项目上下文的情况下创建 menuModel。如果您已经看到，建议返回一个缓存实例那个项目。
创建一个以 item 为键的 menuModels 映射。更新每当项目发生变化时这张地图。

对于实际的菜单模型，您应该能够做到：

createMenuModel(item) {
  return new MenuModel([new MenuItemGroup([
      new MenuItem('Editar', action: () => navegarParaItensTrabalho(item)), 
      new MenuItem('Excluir', action: () => excluirItensTrabalho(item))])],
      icon: new Icon('menu'));
}

如何将对象传递给 material-menu 操作？

How to pass an object to material-menu action?

dart

angular-dart

angular-components