Angolare 2 ng per il primo, l'ultimo, index loop

Sto cercando di impostare come predefinita la prima occorrenza in questo esempio: plunkr

ottenendo il seguente errore:

    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

che c'è??

angular angular-material

— PriNcee
fonte

Risposte:

187

Dai un'occhiata a questo plunkr .

Quando ti colleghi alle variabili, devi usare le parentesi. Inoltre, usi l'hashtag quando vuoi ottenere riferimenti a elementi nel tuo html, non per dichiarare variabili all'interno di modelli del genere.

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

Modifica: Grazie a Christopher Moore : Angular espone le seguenti variabili locali:

index
first
last
even
odd

— Steveadoo
fonte

Grazie! questo mi ha aiutato tantissimo, ma ho provato a usare il primo perché cercandolo ho trovato alcuni esempi come: blog.angular-university.io/angular-2-ngfor (Identificare il primo e l'ultimo elemento di una lista)

— PriNcee

Ah ok. Puoi farlo anche tu. Invece di let i = indexcambiarlo in let first = first;e cambiare l'associazione [controllata] in modo da selezionare solo "primo" invece di "i == 0".

— Steveadoo

simpatico! ora sta funzionando! ma non riesco a capire perché devo associare l'attributo verificato con parentesi

— PriNcee

@Steveadoo in ngForespone angolari seguenti variabili locali index, first, last, evene odd. Potresti aggiornare la risposta per chiarire questo punto per i futuri utenti?

— Christopher Moore

Invece di let first = firstpuoi scrivere first as isFirst(isFirst è la variabile personalizzata) come descritto qui: angular.io/api/common/NgForOf#local-variables

— jurl

Ecco come viene fatto in Angular 6

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

Nota il cambiamento da let first = firstafirst as isFirst

— Sebastian Hernandez
fonte

È necessario sostituire il tubo |con quello ;affinché funzioni.

— Florian Moser

let first = firsted first as isFirstentrambe le dichiarazioni sono corrette da usare, il secondo alias è praticamente leggibile

— Mohan Ram

Con questo puoi ottenere qualsiasi indice in *ngForloop in ANGOLARE ...

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

Possiamo usare questi alias in *ngFor

index: number: let i = indexPer ottenere tutte indice di oggetto.
first: boolean: let first = firstPer ottenere primo indice di oggetto.
last: boolean: let last = lastPer ottenere ultimo indice di oggetto.
odd: boolean: let odd = oddPer ottenere l'indice dispari di oggetto.
even: boolean: let even = evenPer ottenere l'indice anche di oggetto.

— Rohit Tagadiya
fonte