Angular 2 ngfor first, last, index loop

user_6435054 0
Viewed 195960

I'm trying to set as default the first occurrence in this example: plunkr

getting the following 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

what is wrong??

angular-material angular
4 Answers

Here is how its done in Angular 6

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

Note the change from let first = first to first as isFirst

user_35551180

By this you can get any index in *ngFor loop in 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>

We can use these alias in *ngFor

  • index : number : let i = index to get all index of object.
  • first : boolean : let first = first to get first index of object.
  • last : boolean : let last = last to get last index of object.
  • odd : boolean : let odd = odd to get odd index of object.
  • even : boolean : let even = even to get even index of object.
user_121682350

Unfortunately, last does not work if there are many database entries to be displayed by ngFor. If you add {{last}} to the item that is being listed so that you can see its contents, you will see that every so often, last is true and then changes to false. When the actual last item is shown, last is shown as true and all the others above are shown as false. This means that "last" is true even though the last item is not shown.

user_29821220
Related