角度で表の行をトグルする

Question

35行を持つことを検討してください。デフォルトでは、クリックすると10行が表示され、35行と表示されます。

は、今私は、それは私が私の所望の出力を得ることができていますが、任意の他の方法がある

<tr *ngFor="let item of total_items;let i = index"> 
    <ng-container *ngIf="!isCardOpen; else showFullList"> 
     <ng-container *ngIf="i<10"> 
      <td> My table data comes here </td> 
     </ng-container> 
    <ng-container> 
    <ng-template #showFullList> 
     <td> My table data again comes here but without if condition</td> 
    <ng-template> 
</tr> 

偽

で、デフォルトではブールisCardOpenと行数を切り替え、この

のようにやっています私は同じテーブルデータを2回、つまりshowFullListテンプレートと内部で*ngIf="i<10"に入れていることを意味していました。

Answer 1

に変更することができます。したがって、isCardOpen = falseの場合、最初の10個の項目のみが表示されます。 isCardOpen = trueの場合、すべてのアイテムが表示されます（インデックスに関係なく）。代替案として

<tr *ngFor="let item of total_items; let i = index"> 
    <ng-container *ngIf="i < 10 || isCardOpen"></ng-container> 
</tr> 

---

、あなたは、各項目にプロパティを追加し、ngIfと/ unrenderをレンダリングするために、その項目のプロパティを切り替えることができます。

<tr *ngFor="let item of total_items"> 
    <ng-container *ngIf="item.isOpen"></ng-container> 
</tr>