How can i display next elements in ngfor after click in table row?-CodePudding

I have a nested array of objects , so i am trying to display in table row only first 3 elements in array and after i am displaying remaining elements in array as a count (i.e 2).Now if i click on remain count i need to display all the elements in array on particular row click.

I am attaching the stack blitz URL for reference :- https://stackblitz.com/edit/primeng-chip-demo-agf8ey?file=src/app/app.component.html,src/app/app.component.ts

Please help me on these issue. Thanks in advance

CodePudding user response：

try this:

 <p-chip
      *ngFor="let cc of slice(c); let i = index"
      [label]="cc.name"
    ></p-chip>

in .ts file

  onChip(val: any) {
   this.chips[val].extand = true;
  }
  
  slice(cc: any, index: number) {
    if(cc?.extand) {
      return cc.values;
    }
    return cc.values.slice(1,3);
  }

also add to every object extand: false

chips = [
   {
    id: 1,
    values: [
    {
      name: 'one',
    },
    {
      name: 'two',
    },
    {
      name: 'three',
    },
    {
      name: 'four',
    },
    {
      name: 'five',
    },
  ],
  extand: false
},]

CodePudding user response：

Create a template variable:

<h5>Basic</h5>
<div >
  <table>
    <tr>
      <th>Id</th>
      <th>Chips</th>
    </tr>
    <tr *ngFor="let c of chips; let val = index">
      <td>{{ c.id }}</td>
      <td #myCell>
        <ng-container *ngIf="myCell.showAll">
          <p-chip *ngFor="let cc of c.values" [label]="cc.name"></p-chip>
        </ng-container>
        <ng-container *ngIf="!myCell.showAll">
          <p-chip
            *ngFor="let cc of c.values | slice: 0:3"
            [label]="cc.name"
          ></p-chip>
          <p-chip
            styleClass="chipMore"
            *ngIf="c.values.length >= 3"
            (click)="myCell.showAll = !myCell.showAll"
            > {{ c.values.length - 3 }}</p-chip
          >
        </ng-container>
      </td>
    </tr>
  </table>
</div>

Play at edited stackblitz: https://stackblitz.com/edit/primeng-chip-demo-ykmg3t?file=src/app/app.component.html