CODEWITHSUNDEEP
javascriptangularfirebase
avimhael
avimhael

Reputation: 105

Angular NgIF NgFOR - how to make generated content have an increment field

I can get this information to pull successfully from Firebase, but unsure how the [attr.id] works. I'd like to increment the users it pulls 1,2,3 etc and list them so. Help would be appreciated!

        <mat-card class="members1">
          <mat-card-title>Active Members</mat-card-title>
          <mat-card-content>
            <table class="table">
              <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">First Name</th>
                <th scope="col">Last Name</th>
                <th scope="col">Email</th>
                <th scope="col">Type</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let u of users; index as i" [attr.id]="'u-'+i">
                <th scope="row">1</th>
                <td>{{ u["fName"] }}</td>
                <td>{{ u["sName"] }}</td>
                <td>{{ u["email"] }}</td>
                <td *ngIf="u.client === true">Client</td>
                <td *ngIf="u.admin === true">Admin</td>
                <td *ngIf="u.admin === false && u.client === false">Student</td>
              </tr>

              </tbody>
            </table>
          </mat-card-content>
        </mat-card>

Upvotes: 0

Views: 126

Answers (1)

Deepu Reghunath
Deepu Reghunath

Reputation: 9713

add <td scope="row">{{i+1}}</td> instead of <th scope="row">1</th>

<mat-card class="members1">
      <mat-card-title>Active Members</mat-card-title>
      <mat-card-content>
        <table class="table">
          <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Email</th>
            <th scope="col">Type</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let u of users; index as i" [attr.id]="'u-'+i">
            <td scope="row">{{i+1}}</td>
            <td>{{ u["fName"] }}</td>
            <td>{{ u["sName"] }}</td>
            <td>{{ u["email"] }}</td>
            <td *ngIf="u.client === true">Client</td>
            <td *ngIf="u.admin === true">Admin</td>
            <td *ngIf="u.admin === false && u.client === false">Student</td>
          </tr>

          </tbody>
        </table>
      </mat-card-content>
    </mat-card>

Upvotes: 1

Related Questions