我想在表格中顯示項目名稱，但行數限制為三。如果超過3項，則第4項應在第2列，如果超過6項，則第7項應在第3列。 我用的是普通桌子。

<table>
    <tr *ngFor="let item of group">
        <td>{{item}}</td>
    </tr>
</table>

請讓我知道我必須給什么條件，以限制行數，并根據項目的數量在列中得到它們。

您可以使用CSS Grid通過grid-auto-flow來安排這種布局。為了讓您開始，這里有一些資源:

CSS技巧——網格完全指南 Kevin Powell -用最簡單的方法學習CSS Kevin Powell——輕松開始使用網格 W3Schools -網格模塊 學習CSS網格-做它所說的 MDN -網格 你使用網格的布局可以在下面看到。我已經注釋了相關的部分:

.table {
  display: grid;
  grid-auto-flow: column; /* make the items fill up the grid container by column and not row */
  grid-template-rows: repeat(3, 1fr); /* have a max number of 3 rows and make them all the same height */
  gap: 0.125rem; /*put a small gap between each element */
}

.table > div {
  background-color:teal;
  padding: 0.5rem 1rem;
}

<div class="table">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>

@Adam已經使用CSS方法發布了正確答案。

如果您希望通過數據操作手動解決這個問題，那么這是一個適合您的解決方案。

export class UsersComponent {
  // Your data
  group: Array<string> = ['A', 'B', 'C', 'D'];
  // Fixed number of rows
  rows: number = 3;
  // Calculate number of columns based on data length and required number of rows
  columns: number = Math.ceil(this.group.length / this.rows);

  // We will push data here
  data: any = [];

  constructor() {
    // counter for data
    let elem = 0;
    // Outer loop
    for (let i = 0; i < this.columns; ++i) {
      // Create a row in data
      this.data.push([]);
      // Inner Loop
      for (let j = 0; j < this.rows; ++j) {
        // Do not push undefined elements (if any)
        if (this.group[elem]) {
          this.data[i][j] = this.group[elem];
        }
        // increment counter
        elem++;
      }
    }
    // We got the data, now lets take the transpose to invert it.
    this.data = this.transpose(this.data);
    console.log(this.data);
  }

  // Credits: https://stackoverflow.com/questions/17428587/transposing-a-2d-array-in-javascript
  transpose(matrix: any) {
    return matrix[0].map((col: any, i: any) =>
      matrix.map((row: any) => row[i])
    );
  }
}

現在我們有了2d格式的數據(具有正確的行數和列數)，您可以在HTML中顯示它，如下所示:

<table class="table">
  <tr *ngFor="let row of data">
    <span *ngFor="let column of row">
      <td *ngIf="column">{{ column }}</td>
    </span>
  </tr>
</table>

只需調整代碼中的外部和內部循環，就可以改變一行中出現的元素的順序(先填充行或先填充列)。您還可以更改數據的行數和大小，以測試各種情況。

在此演示https://stackblitz.com/edit/angular-mgte7k?文件= src % 2 fusers % 2 fusers . component . ts