Búsqueda de sitios web

angular - ¿Existe algo como una condición de input() opcional al pasar un valor a los componentes?


El título puede ser engañoso, déjame explicar.

Digamos que tenemos una colección y usamos ngfor para enlazarlas en html. Y luego, para cada colección, según la condición, pasamos un valor a un componente hijo. Por ejemplo:

<ng-template ngFor let-person="$implicit" [ngForOf]="peopleAsPreviousCurrentAndNextTriplets" let-i=index let-last=last>
  <app-card 
  [decrement]="(2 - i)" 
  [defaultDiff]="(+30) * (2 - i)" 
  [prevCard]="person.previous" 
  [currentCard]="person.current" 
  [nextCard]="person.next"
  ></app-card>
</ng-template>

Como puedes ver, estamos pasando [prevCard], [currentCard], [nextCard] al componente en cada elemento de la colección.

Sin embargo, no quiero esto.

Solo quiero pasar [prevCard], [currentCard], [nextCard] cuando esté en last. Y si no es last, entonces solo quiero pasar [currentCard].

¿Cómo puedo hacer esto aquí?

Respuesta #1

Podrías simplemente usar el operador ternario para verificar si actualmente estás en el último elemento:

[prevCard]="last === person ? person.previous : null" 

Entonces podrías hacer lo mismo para las otras entradas.

Respuesta #2

Ok, gracias chicos por su ayuda. Logré resolver el problema haciendo lo que sugirieron, pero la condición era un poco diferente:

<ng-template ngFor let-person="$implicit" [ngForOf]="peopleAsPreviousCurrentAndNextTriplets" let-i=index let-last=last>
  <app-card 
      [decrement]   = "(2 - i)" 
      [defaultDiff] = "(+30) * (2 - i)" 
      [prevCard]    = "last ? person.previous : null" 
      [currentCard] = "person.current" 
      [nextCard]    = "last ? person.next : null"
  ></app-card>
</ng-template>

Básicamente, esto ni siquiera lo muestra en el HTML si la condición falla, que es lo que quería.

De nuevo, gracias por tu ayuda.

Artículos relacionados