Así que tengo una variedad de artículos. Quiero mostrar estos elementos y cuando son más de dos, aparecerá un botón en su lugar con el número de elementos restantes y su nombre.
<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>Mis problemas:
el botón con el número del resto de los elementos se muestra más de una vez ya que está en ngFor, y necesito ngFor para mostrar el elemento. Nombre, ¿cómo solucionarlo?
¿Hay alguna forma mejor de mostrar el número del resto de elementos en lugar de + {{items?.length-2}}
tienes que elegir: 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- mueva el botón fuera de for y cámbielo a:
<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>