ng-zorro-antd - 从 *ngFor 调用的 nz-dropdown-menu

Question

我有一个简单的 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' Component > is going to be removed in 9.0.0. Please use 'nz-dropdown-menu' instead.

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 中的“订单”项传递给子菜单上的“点击”？

Answer 1

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

<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