Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

173
Views
Mostrar la lista de elementos y, cuando sean más de 2, mostrar el menú mat en su lugar

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}}

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!