在这种情况下如何制作 for 循环？

Question

我正在尝试对 angular 进行分页。 我在 Google 中找到了一个可行的解决方案，但我无法正确实施。

app.component.ts

export class AppComponent implements OnInit {

orders: Orders;

config: any;
collection = { count: 100, data: [] };

constructor(private http: HttpClient) {

// Create dummy data
for (let i = 0; i < this.collection.count; i++) {
  this.collection.data.push(
    {
      id: i + 1,
      value: 'items number ' + (i + 1)
    }
  );
}

this.config = {
  itemsPerPage: 5,
  currentPage: 1,
  totalItems: this.collection.count
};
}

ngOnInit(){
this.http.get('http://127.0.0.1:8000/api/orders').subscribe((data: Orders) => this.orders = data);
}

pageChanged(event){
this.config.currentPage = event;
}

}

app.component.html

      <table class="table">
    <tbody>

    <p *ngFor="let order of orders">
    <tr *ngFor="let item of collection.data | paginate: config">
    <th scope="row">{{item.id}}</th>
    <td>  {{order?.customer}}</td>
    </tr>
    </p>
    </tbody>
  </table>

  <pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>

结果

但需要：

1 希拉里·格里尔

2日元奥尔特加

3 马里斯·奥康纳

4 西比尔·格雷戈里

5 荆棘李

如何解决？

Answer 1

将您的 HTML 更改为：-

<table class="table">
    <tbody>

    <tr *ngFor="let order of orders | paginate: config ; let i=index">
    <th scope="row">{{index+1}}</th>
    <td>  {{order?.customer}}</td>
    </tr>
    </tbody>
  </table>

  <pagination-controls (pageChange)="pageChanged($event)"></pagination-controls>