如何在一行显示两个mat-card？动态循环未知数量卡片每行两张

嘿，我来帮你搞定这个需求！要让*ngFor循环渲染的卡片每行显示两张，有两种常用的靠谱方法，我给你详细拆解下：

方法一：用CSS Flexbox（最简单，推荐） #

这种方法不需要修改你的数据结构，直接靠容器的Flex布局就能实现自动换行，每行两张。

组件模板代码 #

<div class="card-container">
  <mat-card class="example-card" *ngFor="let user of users">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{user.firstName}}</mat-card-title>
      <mat-card-subtitle>{{user.lastName}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>
        The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog f...
      </p>
    </mat-card-content>
  </mat-card>
</div>

CSS样式代码 #

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 卡片之间的间距，可调整 */
  padding: 1rem;
}

.example-card {
  flex: 0 0 calc(50% - 0.5rem); /* 每张卡片占50%宽度，减去一半的间距避免换行 */
  box-sizing: border-box; /* 确保padding和border不影响宽度计算 */
}

/* 响应式适配：屏幕小的时候改成每行一张 */
@media (max-width: 768px) {
  .example-card {
    flex: 0 0 100%;
  }
}

这种方法的好处是无需修改数据，纯CSS控制布局，还能轻松加响应式适配，适合大部分场景。

方法二：把数据分组后循环（更可控） #

如果你需要对每行做特殊处理（比如给每行加个边框、标题），可以先把用户数组拆成每两个元素一组的子数组，再用两层*ngFor循环。

组件类代码（添加分组方法） #

import { Component } from '@angular/core';

interface User {
  firstName: string;
  lastName: string;
}

@Component({
  selector: 'app-card-list',
  templateUrl: './card-list.component.html',
  styleUrls: ['./card-list.component.css']
})
export class CardListComponent {
  users: User[] = [
    // 你的用户数据示例
    { firstName: 'John', lastName: 'Doe' },
    { firstName: 'Jane', lastName: 'Smith' },
    { firstName: 'Bob', lastName: 'Brown' },
    { firstName: 'Alice', lastName: 'Taylor' }
  ];

  // 把数组分成每两个一组
  splitIntoPairs(arr: User[]): User[][] {
    const pairs = [];
    for (let i = 0; i < arr.length; i += 2) {
      pairs.push(arr.slice(i, i + 2));
    }
    return pairs;
  }
}

组件模板代码 #

<div class="card-grid">
  <div class="card-row" *ngFor="let pair of splitIntoPairs(users)">
    <mat-card class="example-card" *ngFor="let user of pair">
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>{{user.firstName}}</mat-card-title>
        <mat-card-subtitle>{{user.lastName}}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>
          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog f...
        </p>
      </mat-card-content>
    </mat-card>
  </div>
</div>

可选CSS样式 #

.card-grid {
  padding: 1rem;
}

.card-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.example-card {
  flex: 1; /* 每行的两张卡片平分宽度 */
}

@media (max-width: 768px) {
  .card-row {
    flex-direction: column;
  }
}

这种方法的优势是能直接控制每行的结构，比如给每行添加额外的元素或样式，适合有特殊布局需求的场景。

你可以根据自己的实际需求选其中一种方法，两种都能完美实现每行两张卡片的效果！

内容的提问来源于stack exchange，提问作者 abdalrahman makahleh