Bind випадаюче значення для paginations itemsPerPage Angular 4 - кутовий, зв'язуючий, випадаючий

Я імпортував просту сторінку на своїй сторінці і хочу, щоб вона прив’язувала кількість елементів на сторінці до значень мого випадаючого списку, як це зробити?

Ось деякий код

     <tr *ngFor="let a of animals | paginate: {itemsPerPage: 8, currentPage:
p}>
<td>{{a.name}}</td>
<td>{{a.color}}</td>
</tr>

І контрольні сторінки

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

Я додав просте спадне меню і хочу прив’язати значення вибраного спаду до itemsPerPage, як це зробити?

  <div class="col-md-offset-11">
<select id="PerPage" class="form-control">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
</select>
</div>

Відповіді:

Вам просто потрібно зберегти розмір сторінки через NgModel у своєму компоненті і використовувати його як параметр вашого фільтра:

Тому прив'яжіть select до моделі та використовуйте ngValue, щоб отримати справжнє числове значення (звичайне значення виводить рядок)

<div class="col-md-offset-11">
<select id="PerPage" class="form-control" [(ngModel)]="pageSize">
<option [ngValue]="5">5</option>
<option [ngValue]="10">10</option>
<option [ngValue]="25">25</option>
</select>
</div>

....
<tr *ngFor="let a of animals | paginate: {itemsPerPage: pageSize, currentPage: p}>
<td>{{a.name}}</td>
<td>{{a.color}}</td>
</tr>

....

// in the component
...
private pageSize: number = 5;
...