nz-dropdown-menu called from *ngFor - ng-zorro-antd

Question

I have and simple ngFor and I would like for each entry to have a button with dropdown and each menu item should call a different function for the specific item in the ngFor.
The code below works and the behaviour is what I expect.
<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>
However I get the error:
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.
The code suggested by NG-ZORRO is:
<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>
If I use code like NG-ZORRO suggest in the documentation, how can I pass the 'order' item from the ngFor to the 'clicks' on the submenus?

Answer 1

Pass the order to the click function as your first example code, and it still works.
<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>
1st item
</li>
<li nz-menu-item>
2nd item
</li>
<li nz-menu-item>
3rd item
</li>
</ul>
</nz-dropdown-menu>
</div>
You can check this example out:
https://stackblitz.com/edit/ng-zorro-antd-start-hnxupx