在这种情况下如何进行for循环？

Question

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

app.component.ts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>


</select>

app.component.html

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

}

结果

但需要：

1希拉里·格里尔

2日元的奥尔特加

3 Maris Okonnor

4西比尔·格雷戈里

5 Briar Lee

如何解决？

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>