validacion - validar formulario javascript html5

¿Cómo puedo aplicar un límite de cantidad a*ngPara?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo aplicar filtros a * ngFor? 18 respuestas

Dado que el filtro de límite ha desaparecido de Angular 2+, ¿cómo puedo aplicar un límite para una declaración simple * ngFor?

<div *ngFor="#tweet of singleCategory">
  {{ tweet }}
</div>

No quiero que la instrucción * ngFor recorra todos los elementos de singleCategory, quiero limitarlo a solo 2 resultados. Creo que se podría hacer con Custom Pipes, pero no sé cómo implementarlo.

Gracias.

Answer 1

Puede aplicar un ngIf en el elemento usando el índice:

<div *ngFor=" let tweet of singleCategory;  let i=index">
    <div *ngIf="i<2">
        {{tweet}}
    </div>
</div>

Si no desea el div de ajuste, revise la sintaxis de la plantilla :

<ng-template ngFor let-tweet [ngForOf]="singleCategory" let-i="index">
    <div [ngIf]="i<2">
        {{tweet}}
    </div>
</ng-template>

Preferiblemente, primero / en su lugar, filtra los elementos en su componente utilizando el filtro para evitar bucles innecesarios al mostrar sus datos:

public get singleCategory() {
   return this.categories.filter((item, index) => index > 2 )
}

También existe la opción de crear una tubería. (Ver el duplicado vinculado)