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]：不建议使用：“ 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中的“ order”项传递给子菜单中的“ clicks”？

Answer 1

将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

从* ngFor

1 个答案: