* ngFor не зацикливает все элементы - PullRequest
Новая
       14

* ngFor не зацикливает все элементы

0 голосов
/ 10 апреля 2020

Я пытаюсь построить angular проект с использованием базы данных Firebase. но проблема в том, что NgFor будет печатать только первый элемент из 3-х элементного массива в html

У меня следующая структура базы данных:

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>

есть идеи, пожалуйста?

Ответы [ 3 ]

1 голос
/ 10 апреля 2020

Обновите шаблон HTML следующим образом: 

<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>

Ссылка на стек: https://stackblitz.com/edit/angular-z6twbw?file=src%2Fapp%2Fapp.component.html

0 голосов
/ 10 апреля 2020

В вашем файле TS 

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>
0 голосов
/ 10 апреля 2020

Я предполагаю, что вы пытаетесь получить только первый элемент из массива ordersstatus. Может быть, это то, что вы ищете 

// Variable on your component
countOfStatusesToDisplay = 1;

Код в шаблоне html. Проверить 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>
...