Kątowa 2 ng dla pierwszej, ostatniej, pętli indeksu

86

Próbuję ustawić jako domyślne pierwsze wystąpienie w tym przykładzie: plunkr

otrzymuję następujący błąd:

    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

co jest nie tak??

PriNcee
źródło

Odpowiedzi:

175

Sprawdź ten plunkr .

Kiedy wiążesz się ze zmiennymi, musisz użyć nawiasów. Używasz również hashtagu, gdy chcesz uzyskać odniesienia do elementów w swoim html, a nie do deklarowania zmiennych wewnątrz takich szablonów.

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

Edycja: Podziękowania dla Christophera Moore'a : Angular ujawnia następujące zmienne lokalne:

  • index
  • first
  • last
  • even
  • odd
Steveadoo
źródło
Dziękuję Ci! to bardzo mi pomogło, ale próbowałem użyć pierwszego, ponieważ szukając go, znalazłem kilka przykładów, takich jak: blog.angular-university.io/angular-2-ngfor (Identyfikacja pierwszego i ostatniego elementu listy)
PriNcee
Ach, ok. Ty też możesz to zrobić. Zamiast tego let i = index, po prostu zmień to na let first = first;i zmień powiązanie [zaznaczone], aby po prostu zaznaczało „pierwsze” zamiast „i == 0”.
Steveadoo
ładny! teraz działa! ale w ogóle nie rozumiem, dlaczego muszę powiązać zaznaczony atrybut nawiasami
PriNcee
29
@Steveadoo w ngForkątowe uwidacznia następujące zmienne lokalne index, first, last, eveni odd. Czy możesz zaktualizować odpowiedź, aby wyjaśnić tę kwestię przyszłym użytkownikom?
Christopher Moore
2
Zamiast let first = firstciebie możesz pisać first as isFirst(isFirst to zmienna niestandardowa), jak opisano tutaj: angular.io/api/common/NgForOf#local-variables
jurl
57

Oto, jak to się robi w Angular 6

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

Zwróć uwagę na zmianę z let first = firstnafirst as isFirst

Sebastian Hernandez
źródło
Trzeba wymienić przewód |Dzięki ;za to do pracy.
Florian Moser,
let first = firsti first as isFirstobie deklaracje są poprawne w użyciu, drugi alias jest prawie czytelny
Mohan Ram
0

W ten sposób możesz uzyskać dowolny indeks w *ngForpętli w 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>

Możemy użyć tych aliasów w *ngFor

  • index: number: let i = indexAby uzyskać wszystkie indeks obiektu.
  • first: boolean: let first = firstDostać pierwszy indeks obiektu.
  • last: boolean: let last = lastAby dostać ostatni indeks obiektu.
  • odd: boolean: let odd = oddDostać dziwne indeks obiektu.
  • even: boolean: let even = evenDostać nawet indeks obiektu.
Rohit Tagadiya
źródło