Angular实现每5项换行的动态键值对表格

1. 组件逻辑处理 #

首先在组件类中定义数据类型，处理API数据并按每5个对象分组：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

// 定义键值对数据类型
interface KeyValuePair {
  key: string;
  value: string;
}

@Component({
  selector: 'app-key-value-table',
  templateUrl: './key-value-table.component.html',
  styleUrls: ['./key-value-table.component.css']
})
export class KeyValueTableComponent implements OnInit {
  // 原始API数据列表
  dataList: KeyValuePair[] = [];
  // 分组后的数据（每5个为一组）
  groupedData: KeyValuePair[][] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // 调用API获取数据
    this.fetchDataFromApi().subscribe(data => {
      this.dataList = data;
      // 将数据按每5个分组
      this.groupedData = this.splitIntoGroups(this.dataList, 5);
    });
  }

  // 数据分组方法
  private splitIntoGroups(list: KeyValuePair[], groupSize: number): KeyValuePair[][] {
    const groups: KeyValuePair[][] = [];
    for (let i = 0; i < list.length; i += groupSize) {
      groups.push(list.slice(i, i + groupSize));
    }
    return groups;
  }

  // 模拟API请求（实际替换为真实接口地址）
  private fetchDataFromApi() {
    return this.http.get<KeyValuePair[]>('your-api-endpoint-url');
  }

  // 计算需要补充的空单元格数量
  getEmptyCells(currentCount: number): number[] {
    const emptyCount = 5 - currentCount;
    return emptyCount > 0 ? Array(emptyCount).fill(0) : [];
  }
}

2. 模板动态生成表格 #

在组件模板中，通过嵌套*ngFor循环生成表格，外层循环分组数据创建行，内层循环每组数据创建单元格：

<table class="key-value-table">
  <tbody>
    <!-- 循环分组数据，每一组对应一行 -->
    <tr *ngFor="let group of groupedData">
      <!-- 循环组内的每个键值对，对应一个单元格 -->
      <td *ngFor="let item of group" class="kv-cell">
        <div class="kv-key">{{ item.key }}</div>
        <div class="kv-value">{{ item.value }}</div>
      </td>
      <!-- 处理最后一行不足5个的情况，补充空单元格保持表格对齐 -->
      <td *ngFor="let empty of getEmptyCells(group.length)" class="kv-cell empty"></td>
    </tr>
  </tbody>
</table>

3. 样式配置（模拟附图样式） #

在组件CSS文件中添加样式，实现表格的布局和视觉效果：

.key-value-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.kv-cell {
  border: 1px solid #e0e0e0;
  padding: 12px;
  text-align: center;
  width: 20%; /* 5个单元格均分宽度 */
}

.kv-key {
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
}

.kv-value {
  color: #666;
  font-size: 0.9rem;
}

.kv-cell.empty {
  border-color: transparent;
}

关键说明 #

• 数据分组：通过splitIntoGroups方法将原始列表切割为每5个元素一组的二维数组，确保每行最多显示5个键值对。
• 空单元格补充：getEmptyCells方法保证最后一行即使不足5个元素，表格布局依然整齐。
• 响应式适配：如果需要适配移动端，可以通过媒体查询调整单元格宽度或每行显示数量。

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