Angular-ngfor*行上的四个元素

Question

我有一个技能数组，每个技能都有一个id和一个名称：{ id:0, name:Angular }。我试着在一张桌子上连续展示四项技能，但我不知道怎么做。我需要以某种方式更改ng-container，但我不知道。结果类似于：HTML CSS JAVASCRIPT JAVA SPRING ANGULAL，但我希望一行只有四个。我的代码是：

<ng-container matColumnDef="skills" class="skillsColumn">
<mat-header-cell *matHeaderCellDef class="skillsColumn">Skills
</mat-header-cell>
<mat-cell *matCellDef="let row" class="skillsColumn">
<ng-container *ngFor="let skill of row.skills">
{{ skill.name + " " }}
</ng-container>
</mat-cell>
</ng-container>

Answer 1

你能详细说明一下吗？你想连练4项技能吗？哪4个？是每排4种不同的技能吗？

如果你只想要前4个，你可以简单地做这个

<ng-container *ngFor="let skill of skills; let i=index">
<div *ngIf="i%4 == 0"></div>
{{ skill.name }} 
</ng-container>

但如果这是你想要的，也许你应该改变html 背后的逻辑

Answer 2

创建一个行数组。您可以使用对值进行迭代来对它们进行分组，也可以使用类似的方法

values=["Html","CSS","Java","Spring","JS","Angular","Python","C++"]
rows=this.values.map((_,x)=>this.values.slice(x*4,(x+1)*4))
.filter(x=>x.length)

参见堆叠式