可扩展的表格（显示更多/更少）

Question

我看起来有点儿，但我似乎找不到正在找的正确的东西。我有一张很长的桌子，我想稍微缩短一下。基本上我只想显示前5个条目并提供更多＆＃39; - 按钮。我知道如何实现它，但也许已经有一个ng-component。

Answer 1

<button (click)="showAll = !showAll">
    <span *ngIf="showAll == false" >show all</button></span>
    <span *ngIf="showAll == true">show all</button></span>
</button>
<table>
    <tr *ngFor="let item of items, let i = index" *ngIf="showAll(i) === true">

    </tr>
</table>

showAll : boolean = false;
showAll(index : number){
    return this.showAll ? true : ((index > 5) ? false : true);
}

Answer 2

show = someNumber; // 5

<tr *ngFor="let item of items |slice:0:showlet i=index">
  <div *ngIf="i == someNumber && show" (click)="show = items.length"></div>
</tr>