CODEWITHSUNDEEP
angularfirebasengfor
Ali Ghassan
Ali Ghassan

Reputation: 1180

*ngFor is not looping all items

l am try to build angular project using Firebase database . but the problem is the NgFor is print only first element of out 3 element array in html .

I have following database structure:

rrrrr

Home ts : 

ordersstatus:  AngularFireList<any>;
this.af.list("/orders").valueChanges().subscribe((res:any)=>{
  this.ordersstatus = res
})

HTML :

    <div class="card-body text-center" *ngFor="let cat of ordersstatus; let i=index">

            <tbody *ngFor="let item of cat   | keyvalue">
                <tr>
                  <td>#{{item.value.newproduct[i].item.itemId}}</td>
                  <td>{{item.value.newproduct[i].item.title}}</td>
                  <td><span>{{item.value.status}}</span></td>
                  <td>
                    <div>{{item.value.Tot}}</div>
                  </td>

                </tr>
            </tbody>

    </div>

any idea please ?

Upvotes: 0

Views: 705

Answers (3)

Abhishek
Abhishek

Reputation: 199

Update the HTML template to this:

<div class="card-body text-center" *ngFor="let cat of data; let i=index">
  <tbody *ngFor="let item of cat | keyvalue">
    <tr *ngFor="let product of item.value.newproduct">
      <td>#{{product.item.itemId}}</td>
    </tr>
  </tbody>
</div>

Stackblitz link: https://stackblitz.com/edit/angular-z6twbw?file=src%2Fapp%2Fapp.component.html

Upvotes: 1

Tzimpo
Tzimpo

Reputation: 1009

On your ts file

ordersstatus:  AngularFireList<any>;
  this.af.list("/orders").valueChanges().subscribe((res:any)=>{
  this.ordersstatus = res.newproduct
 })

HTML 

        <tbody *ngFor="let item of ordersstatus | keyvalue">
            <tr>
              <td>{{item.itemId}}</td>
              <td>{{item.title}}</td>
            </tr>
        </tbody>

</div>

Upvotes: 0

Sandeep K Nair
Sandeep K Nair

Reputation: 2932

I assume you are trying to get only first item from the array ordersstatus. May be this is what you are looking for

// Variable on your component
countOfStatusesToDisplay = 1;

Code on your html template. Check out slice:0:countOfStatusesToDisplay

<div class="card-body text-center" *ngFor="let cat of ordersstatus | slice:0:countOfStatusesToDisplay; let i=index">
    <tbody *ngFor="let item of cat | keyvalue">
        <tr>
            <td>#{{item.value.newproduct[i].item.itemId}}</td>
            <td>{{item.value.newproduct[i].item.title}}</td>
            <td><span>{{item.value.status}}</span></td>
            <td><div>{{item.value.Tot}}</div></td>
        </tr>
    </tbody>
</div>

Upvotes: 0

Related Questions