Angular 2 ng para primeiro, último, loop de índice

Estou tentando definir como padrão a primeira ocorrência neste exemplo: plunkr

obtendo o seguinte erro:

    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

o que está errado??

angular angular-material

— PriNcee
fonte

Respostas:

175

Confira este plunkr .

Quando você está vinculando a variáveis, você precisa usar os colchetes. Além disso, você usa a hashtag quando deseja obter referências a elementos em seu html, não para declarar variáveis dentro de modelos como esse.

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

Edit: Graças a Christopher Moore : Angular expõe as seguintes variáveis locais:

index
first
last
even
odd

— Steveadoo
fonte

Obrigado! isso me ajudou muito, mas tentei usar o primeiro porque pesquisando sobre ele encontrei alguns exemplos como: blog.angular-university.io/angular-2-ngfor (Identificando o primeiro e o último elemento de uma lista)

— PriNcee

Ah ok. Você também pode fazer isso. Em vez de let i = index, apenas altere para let first = first;e altere a vinculação [marcada] para apenas marcar "primeiro" em vez de "i == 0".

— Steveadoo

bom! agora está funcionando! mas não consigo entender por que devo vincular o atributo marcado com colchetes

— PriNcee

@Steveadoo em ngForexpõe angular as seguintes variáveis locais index, first, last, evene odd. Você poderia atualizar a resposta para esclarecer este ponto para futuros usuários?

— Christopher Moore

Em vez de, let first = firstvocê pode escrever first as isFirst(isFirst é a variável personalizada) conforme descrito aqui: angular.io/api/common/NgForOf#local-variables

— jurl

Aqui está como é feito no Angular 6

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

Observe a mudança de let first = firstparafirst as isFirst

— Sebastian Hernandez
fonte

Você precisa substituir o tubo |pelo ;para que funcione.

— Florian Moser,

let first = firste first as isFirstambas as declarações estão corretas para uso, o segundo alias é bastante legível

— Mohan Ram

Com isso você pode obter qualquer índice em *ngForloop em 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 esses alias em *ngFor

index: number: let i = indexPara obter todas índice do objeto.
first: boolean: let first = firstPara obter primeiro índice de objeto.
last: boolean: let last = lastPara obter último índice de objeto.
odd: boolean: let odd = oddPara obter índice ímpar de objeto.
even: boolean: let even = evenPara obter ainda o índice de objeto.

— Rohit Tagadiya
fonte