3

我有一个简单的 ngFor，我希望每个条目都有一个带有下拉菜单的按钮，并且每个菜单项应该为 ngFor 中的特定项目调用不同的函数。

下面的代码有效，并且行为是我所期望的。

<div *ngFor="let order of orders">

          <nz-dropdown>
              <button nz-button nz-dropdown [nzType]="'primary'" nzGhost>
                  <span>Almighty Dropdown</span><i nz-icon nzType="ellipsis"></i>
              </button>
              <ul nz-menu>
                  <li nz-menu-item (click)="fc1(order)">Function 1</li>
                  <li nz-menu-item (click)="fc2(order)">Function 2</li>
              </ul>
            </nz-dropdown>
</div>

但是我得到了错误：

ng-zorro-antd-core.js:658 [NG-ZORRO]: deprecated: 'nz-dropdown' 组件 > 将在 9.0.0 中删除。请改用“nz-dropdown-menu”。

NG-ZORRO 建议的代码是：

<button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    <li nz-menu-item>
      <a>1st item</a>
    </li>
    <li nz-menu-item>
      <a>2nd item</a>
    </li>
    <li nz-menu-item>
      <a>3rd item</a>
    </li>
  </ul>
</nz-dropdown-menu>

如果我使用文档中建议的 NG-ZORRO 之类的代码，如何将 ngFor 中的“订单”项传递给子菜单上的“点击”？

4

1 回答 1

3

将 传递order给 click 函数作为您的第一个示例代码，它仍然有效。

<div class="order" *ngFor="let order of orders">
    {{order.name}}
    <button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item>
          <a href="javascript:void(0)" (click)="fc1(order)">1st item</a>
        </li>
        <li nz-menu-item>
          <a href="javascript:void(0)" (click)="fc2(order)">2nd item</a>
        </li>
        <li nz-menu-item>
          <a href="javascript:void(0)" (click)="fc3(order)">3rd item</a>
        </li>
      </ul>
    </nz-dropdown-menu>
</div>

您可以查看此示例： https ://stackblitz.com/edit/ng-zorro-antd-start-hnxupx

于 2019-07-04T09:06:03.363 回答