我怎么能显示下一个元素在ngfor后单击表行?

Question

我有一个嵌套的对象数组，所以我试图在表行中显示数组中的前3个元素，之后我将数组中的剩余元素显示为计数(即+2)。现在，如果我点击retain count，我需要显示数组中特定行的所有元素，点击

我附上了堆栈闪电战URL供参考:- https://stackblitz.com/edit/primeng-chip-demo-agf8ey?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

请在这些问题上帮助我。提前感谢

Answer 1

try this:

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

in.tsfile

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);
}

也添加到每个对象extand: false

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

Answer 2

创建模板变量:

<h5>Basic</h5>
<div class="p-d-flex p-ai-center">
<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