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

86

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
29
@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
2
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
57

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
0

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