如何在TypeScript中实现类似ngFor的循环逻辑？

Angular的*ngFor本质就是基于数组的循环遍历，你可以直接用TypeScript原生的数组方法（比如forEach、for...of）或者循环语句来复刻模板里的双层循环逻辑。

先明确数据类型（可选，但能让代码更规范） #

// 定义对应的数据结构
interface HubxDataItem {
  itemTitle: string;
  itemValue: string | number;
  itemUnit: string;
  normalRange: string;
}

interface HubxReport {
  categoryName: string;
  hubxDataItems: HubxDataItem[];
}

// 模拟你的数据源
const hubxReportList: HubxReport[] = /* 你的实际数组数据 */;
const column: string = /* 你的column值 */;

基础循环逻辑（对应模板的遍历逻辑） #

直接用forEach实现双层循环，和模板里的*ngFor一一对应：

// 外层循环：遍历hubxReportList，index对应模板里的i=index
hubxReportList.forEach((hubxReport, index) => {
  // 对应模板中第一个<tr>的内容
  console.log(`${hubxReport.categoryName}Test`);
  
  // 对应模板中第二个<tr>的内容
  console.log(column);

  // 内层循环：遍历hubxDataItems
  hubxReport.hubxDataItems.forEach(item => {
    // 对应模板里数据行的<td>内容
    console.log(item.itemTitle, item.itemValue, item.itemUnit, item.normalRange);
    // 这里可以替换成你需要的操作：比如生成PDF内容、构建DOM等
  });
});

如果要生成和模板一致的HTML结构 #

方式1：拼接HTML字符串

let htmlContent = '';

hubxReportList.forEach((hubxReport, index) => {
  // 给每个table加唯一id，避免重复
  htmlContent += `<table id="pdfData-${index}">`;
  htmlContent += `<tr><th>${hubxReport.categoryName}Test</th></tr>`;
  htmlContent += `<tr><th>${column}</th></tr>`;
  
  hubxReport.hubxDataItems.forEach(item => {
    htmlContent += `<tr>
      <td></td>
      <td>${item.itemTitle}</td>
      <td>${item.itemValue}</td>
      <td>${item.itemUnit}</td>
      <td>${item.normalRange}</td>
    </tr>`;
  });
  
  htmlContent += `</table>`;
});

// 将生成的HTML插入到页面容器中
document.getElementById('target-container')?.innerHTML = htmlContent;

方式2：原生DOM操作（更安全，避免XSS风险）

const container = document.getElementById('target-container');
if (!container) return;

hubxReportList.forEach((hubxReport, index) => {
  // 创建table元素
  const table = document.createElement('table');
  table.id = `pdfData-${index}`;

  // 构建第一个表头行
  const headerTr1 = document.createElement('tr');
  const headerTh1 = document.createElement('th');
  headerTh1.textContent = `${hubxReport.categoryName}Test`;
  headerTr1.appendChild(headerTh1);
  table.appendChild(headerTr1);

  // 构建第二个表头行
  const headerTr2 = document.createElement('tr');
  const headerTh2 = document.createElement('th');
  headerTh2.textContent = column;
  headerTr2.appendChild(headerTh2);
  table.appendChild(headerTr2);

  // 构建数据行
  hubxReport.hubxDataItems.forEach(item => {
    const dataTr = document.createElement('tr');
    
    // 空单元格
    dataTr.appendChild(document.createElement('td'));
    
    // 依次添加数据单元格
    const titleTd = document.createElement('td');
    titleTd.textContent = item.itemTitle;
    dataTr.appendChild(titleTd);

    const valueTd = document.createElement('td');
    valueTd.textContent = item.itemValue.toString();
    dataTr.appendChild(valueTd);

    const unitTd = document.createElement('td');
    unitTd.textContent = item.itemUnit;
    dataTr.appendChild(unitTd);

    const rangeTd = document.createElement('td');
    rangeTd.textContent = item.normalRange;
    dataTr.appendChild(rangeTd);

    table.appendChild(dataTr);
  });

  container.appendChild(table);
});

注意事项 #

• 模板里的*ngFor会自动处理空数组，TypeScript里可以先判断数组是否非空：if (hubxReportList?.length) { ... }
• 如果处理用户输入的内容，优先用DOM操作，避免HTML字符串拼接带来的XSS风险
• 模板里的index变量对应forEach的第二个参数，直接可用

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