时间戳

首页 > 解决方案 > Angular 在一行上显示数组的四个元素

javascript - Angular 在一行上显示数组的四个元素

问题描述

我有一系列技能，数量不限。我试图连续显示四个技能。示例：第一行：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>

标签： javascripthtmlangulartypescript

解决方案

在您的*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%
}

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

确保skillsColumn班级足够宽，可以连续容纳四个长名字，你应该很好。

注意：如果您计划在skillCSS 类中使用一些填充/边距，请记住填充/边距是在flex: 0 0 25%. 要使每行 4 个项目具有填充/边距，您应该使用flex: 0 0 20%或任何适合的百分比，具体取决于您的填充/边距

推荐阅读