Angular在一行上显示数组的四个元素[重复]答案

【问题标题】：Angular display four elements of an array on a row [duplicate]Angular在一行上显示数组的四个元素[重复]
【发布时间】：2021-06-28 13:38:01
【问题描述】：

我有很多技能，数量不限。我试图连续显示四个技能。示例：第一行：Html CSS JS Java 第二行：Angular Spring C++ Python 等等。我怎么能做到？我的代码是：

<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 skills">
          {{ skill.name + " " }}
        </ng-container>
      </mat-cell>
</ng-container>

【问题讨论】：

DDenis，你不必多次重复同一个问题。如果您（单击）“头像”链接（位于页面右上角），您可以查看您的问题。总之，您有最近的问题。

标签： javascript html angular typescript

【解决方案1】：

在您的 *matCellDef 中，使用如下模板：

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

并添加以下 CSS

.skills-container {
  display: flex;
  flex-wrap: wrap;
  width: auto;
}

.skill {
  flex: 0 0 25%
}

skill CSS 类的基本意思是“不要缩小内容，不要扩大内容，使其达到父级宽度的 25%”。

确保skillsColumn 类足够宽，可以连续容纳四个长名称，这样你就可以了。

注意：如果您计划在 skill CSS 类中使用一些填充/边距，请记住填充/边距在 flex: 0 0 25% 之前计算。为了使每行 4 个项目具有填充/边距，您应该使用 flex: 0 0 20% 或任何适合您的填充/边距的百分比

【讨论】：

【解决方案2】：

为什么不将 ng-container 包装在一个 div 中，然后将该 div 添加一个 display: grid 和 grid-template-columns: repeat(4, 25%)

类似

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


.grid {
  grid-template-columns: repeat(4, 25%);
}

【讨论】：