Angular 2 ng para el primer, último, bucle de índice

86

Estoy tratando de establecer como predeterminada la primera aparición en este ejemplo: plunkr

obteniendo el siguiente error:

    Unhandled Promise rejection: Template parse errors:
    TypeError: Cannot read property 'toUpperCase' of undefined ("dButtonToggleGroup">
    <md-button-toggle [ERROR ->]*ngFor="let indicador of indicadores; #first = first" value="indicador.id" [checked]="first">"): ng:///AppModule/HomeComponent.html@35:78
    Parser Error: Unexpected token #, expected identifier, keyword, or string at column 31 in [let indicador of indicadores; #first = first] in ng:///AppModule/HomeComponent.html@35:78 ("<md-button-toggle *ngFor="let indicador of indicadores; #first = first" value="indicador.id" [ERROR ->][checked]="first">
    <span>{{ indicado"): ng:///AppModule/HomeComponent.html@35:153

¿¿qué está mal??

angular angular-material PriNcee
fuente

Respuestas:

175

Mira este plunkr .

Cuando se vincula a variables, debe usar los corchetes. Además, usa el hashtag cuando desea obtener referencias a elementos en su html, no para declarar variables dentro de plantillas como esa.

<md-button-toggle *ngFor="let indicador of indicadores; let first = first;" [value]="indicador.id" [checked]="first"> 
...

Editar: Gracias a Christopher Moore : Angular expone las siguientes variables locales:

  • index
  • first
  • last
  • even
  • odd
Steveadoo
fuente
¡Gracias! eso me ayudó mucho, pero intenté usar el primero porque al buscarlo encontré algunos ejemplos como: blog.angular-university.io/angular-2-ngfor (Identificar el primer y último elemento de una lista)
PriNcee
Ah, vale. También puedes hacer eso. En lugar de let i = index, simplemente cámbielo a let first = first;y cambie el enlace [marcado] para marcar "primero" en lugar de "i == 0".
Steveadoo
¡bonito! ahora esta funcionando! pero no puedo entender en absoluto por qué debo vincular el atributo marcado con corchetes
PriNcee
29
@Steveadoo en ngForrevelaciones angular de las siguientes variables locales index, first, last, eveny odd. ¿Podrías actualizar la respuesta para aclarar este punto a futuros usuarios?
Christopher Moore
2
En lugar de let first = first, puede escribir first as isFirst(isFirst es la variable personalizada) como se describe aquí: angular.io/api/common/NgForOf#local-variables
jurl
57

Así es como se hace en Angular 6

<li *ngFor="let user of userObservable ; first as isFirst">
   <span *ngIf="isFirst">default</span>
</li>

Note el cambio de let first = firstafirst as isFirst

Sebastián Hernández
fuente
Necesita reemplazar la tubería |con la ;para que funcione.
Florian Moser
let first = firsty first as isFirstambas declaraciones son correctas de usar, el segundo alias es bastante legible
Mohan Ram
0

Con esto puede obtener cualquier índice en *ngForbucle en ANGULAR ...

<ul>
  <li *ngFor="let object of myArray; let i = index; let first = first ;let last = last;">
    <div *ngIf="first">
       // write your code...
    </div>

    <div *ngIf="last">
       // write your code...
    </div>
  </li>
</ul>

Podemos usar estos alias en *ngFor

  • index: number: let i = indexPara obtener todos los índices del objeto.
  • first: boolean: let first = firstPara obtener el primer índice del objeto.
  • last: boolean: let last = lastPara conseguir último índice del objeto.
  • odd: boolean: let odd = oddPara obtener el índice impar de objeto.
  • even: boolean: let even = evenPara conseguir índice par de objeto.
Rohit Tagadiya
fuente