显示项目列表，当它们超过2个时，显示垫子菜单

Question

所以我有一个项目数组。我想显示这些项目，当它们超过两个时，会显示一个按钮，显示剩余项目的编号和名称。

<div *ngFor="let item of items; let i = index">
<div>
<div class="avatar" *ngIf=" i<2" />
{{items.Name}}
</div>
<div *ngIf="i >= 2 && items?.length > 2">
<button class="avatar" mat-button [matMenuTriggerFor]="menu">+ {{items?.length-2}}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>{{items.Name}}</button>
</mat-menu>
</div>
</div>
</div>

我的问题：

• 带有其余项目编号的按钮显示不止一次，因为它位于ngFor下，我需要ngFor来显示该项目。Name，如何修复？

• 有没有更好的方法显示其余项目的数量，而不是+ {{items?.length-2}}

Answer 1

您必须选择：1-

<div *ngIf="i == 2 && items?.length > 2">
<button class="avatar" mat-button [matMenuTriggerFor]="menu">+ {{items?.length-2}}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>{{items.Name}}</button>
</mat-menu>

2-将按钮移动到for的外部，并将其更改为：

<div *ngIf="items?.length > 2">
<button class="avatar" mat-button [matMenuTriggerFor]="menu">+ {{items?.length-2}}</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>{{items.Name}}</button>
</mat-menu>