Angular - ngfor* 行上有四个元素 [英] Angular - ngfor* four elements on row

问题描述

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

I have an array of skills, every skill has an id and a name: { id:0, name:Angular }. I'm trying to display four skills on a row in a table, but I don't know how. I need to change that ng-container somehow, but I don't know. The result is something like: HTML CSS JAVASCRIPT JAVA SPRING ANGULAR, but I want only four on a row. My code is:

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

推荐答案

你能详细说明一下吗?你想要连续 4 个技能吗?哪4个?每行有 4 个不同的技能吗?

Can you please elaborate? you want 4 skills in a row? which 4? is it 4 different skills per row?

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

If you just want the first 4 you can simply do this

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

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

but if that's what you want maybe you should change the logic behind the html

这篇关于Angular - ngfor* 行上有四个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！