Angular - ngfor* 行上的四个元素答案

【问题标题】：Angular - ngfor* four elements on rowAngular - ngfor* 行上的四个元素
【发布时间】：2021-09-10 14:28:46
【问题描述】：

我有一系列技能，每个技能都有一个 id 和一个名称：{ id:0, name:Angular }。我试图在表格的一行中显示四个技能，但我不知道如何。我需要以某种方式更改ng-container，但我不知道。结果类似于：HTML CSS JAVASCRIPT JAVA SPRING ANGULAR，但我只想要连续四个。我的代码是：

<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>

【问题讨论】：

结果如何？有什么问题？
技能打印是这样的：Angular Java Javascript Spring CSS HTML，但是我要的是连续四个。
如果你只想要 fpur，而丢弃其他的，那么只需对数组进行切片 - *ngFor="let Skill of row.skills.slice(0,3)"
我希望显示所有技能，但一排最多可以显示四个技能

标签： javascript html css angular

【解决方案1】：

创建一个行数组。您可以使用迭代值对它们进行分组或使用类似

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)

见stackblitz

【讨论】：

【解决方案2】：

你能详细说明一下吗？你想要连续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 背后的逻辑

【讨论】：

是的，技能数量可以无限，我想显示所有技能，但只能连续显示四个技能。第一行：Html、CSS、Java、Spring 第二行：JS、Angular、Python、C++
那么我认为我的回答可以很容易地为您解决。顺便说一句，我编辑了它，所以如果它适合你，请复制新代码。
我希望显示所有技能，但一排最多可以显示四个技能
所以你的意思是你想在4个技能后换行？它应该在同一个表格单元格中还是另一个单元格中？
是的，4个技能后换行。它应该在同一个表格单元格中