从 *ngFor 调用的 nz-dropdown-menu
nz-dropdown-menu called from *ngFor
我有一个简单的 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 之类的代码,如何将 'order' 项目从 ngFor 传递到子菜单上的 'clicks'?
将 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
我有一个简单的 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 之类的代码,如何将 'order' 项目从 ngFor 传递到子菜单上的 'clicks'?
将 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