Отображать ограниченное количество записей в Angular

Question

У меня есть таблица в Angular, и я хочу отображать только 3 ее строки в родительском компоненте и когда вы нажимаете кнопку полной таблицы, чтобы увидеть полные записи таблицы.

<div class="parent">
    <div class="col-lg-7">
        <button class="btn font-weight-bold" (click)="openFullTable()">Full Table</button>
        <app-table></app-table>
        //here I want to display only 3 rows
    </div>
    ........
</div>

Answer 1

Предполагая, что вы устанавливаете для переменной с именем showFullTable значение true в методе openFullTable, вы можете использовать *ngFor таким образом

 <app-table
   *ngFor="let data of (showFullTable ? collection : (collection | slice:0:3))"
 >
 </app-table>"

Answer 2

parent template:

...
    <button class="btn font-weight-bold" (click)="openFullTable()">Full Table</button>
    <app-table [isFullTable]='isFullTable'></app-table>
...



parent component:

...
  isFullTable: boolean = true;

  openFullTable() {
    this.isFullTable = !this.isFullTable;
  }
...


child component class:

...
export class Table {
    @Input() isFullTable: boolean;
}
...



child template:

<div *ngIf="isFullTable">
    <li *ngFor="let i of collection">{{i}}</li>
</div>
<div *ngIf="!isFullTable">
    <li *ngFor="let i of collection | slice:0:3">{{i}}</li>
</div>

С помощью метода openFullTable () вы можете изменить значение логического атрибута isFullTable. Он должен изменить значение в дочернем компоненте и вызвать показанные таблицы.

Answer 3

Вы можете использовать SlicePipe

 <li *ngFor="let i of collection | slice:1:3">{{i}}</li>