number index for example angular typescript ngfor

index - ¿Cuál es la diferencia entre[ngFor] y[ngForOf] en angular2?



ngfor index angular 5 (5)

En mi opinión, lo que obtuve del documento angular,

  • [ngFor] no es type safe
  • [NgForOf] es type safe

Porque ambos detalles de clase son un poco diferentes

  • ngFor tipo de clase es any tipo

  • Pero el detalle de la clase ngForOf es ngForOf : NgIterable<T>

ngForOf parece a los genéricos que ya he mencionado en mi pregunta.

Según mi entendimiento, ambos están haciendo las mismas funciones. Pero,

Es mi entendimiento correcto? o ¿Podría compartir más diferencias (detalles) sobre ngFor y ngForOf ?

NgFor puede iterar una matriz pero en ngContainer, ngContent no podemos iterar ngFor directamente, por lo que para iterar podemos usar [ngForOf]. Aquí yo soy variable, calificaciones es una matriz.

Ex.

<ng-template ngFor let-i [ngForOf]="ratings"> <option *ngIf="i<=22" [ngValue]="i">{{i}}:00 Hrs.</option> </ng-template>

En este ejemplo, quiero aplicar un ngFor y ngIf al mismo tiempo, así que lo usé.

El otro punto de vista es que a un nivel normal si aplicamos ngFor entonces al renderizarlo lo convierte en

<template ngFor let-i [ngForOf]="ratings"> <HTML Element>...</HTML Element> </template>

Versión explícita

  • (<template ngFor ...>) permite aplicar la directiva a múltiples elementos a la vez

Versión implícita

  • solo envuelve el elemento donde se aplica

ngFor es una directiva estructural de Angular que reemplaza el atributo ng-repeat de AngularJS

Puedes usar ngFor como taquigrafía

<li *ngFor="let item of items">{{item.name}}</li>

o como la versión a mano

<template ngFor let-item="$implicit" [ngForOf]="items"> {{item.name}} </template>

ngFor y ngForOf no son dos cosas distintas: en realidad son los selectores de la directiva NgForOf.

Si examina la source , verá que la directiva NgForOf tiene como selector: [ngFor][ngForOf] , lo que significa que ambos atributos deben estar presentes en un elemento para que la directiva se "active", por así decirlo.

Cuando utiliza *ngFor , el compilador angular *ngFor esa sintaxis en su forma canónica que tiene ambos atributos en el elemento.

Asi que,

<div *ngFor="let item of items"></div>

Desaguas a:

<template [ngFor]="let item of items"> <div></div> </template>

Esta primera eliminación de azúcar se debe a ''*''. La próxima eliminación de azúcar se debe a la micro sintaxis: "dejar elemento de artículos". El compilador angular elimina el azúcar de esa forma para:

<template ngFor let-item="$implicit" [ngForOf]="items"> <div>...</div> </template>

(donde puede pensar en $ implícito como una variable interna que la directiva usa para referirse al ítem actual en la iteración).

En su forma canónica, el atributo ngFor es solo un marcador, mientras que el atributo ngForOf es en realidad una entrada a la directiva que apunta a la lista de cosas sobre las que desea iterar.

Puede consultar la guía de microsintaturas angulares para obtener más información.