Angular中展示HashMap内查询与执行计划：实现执行计划表格化

我来帮你搞定这个执行计划显示的难题！你现在遇到的是执行计划文本无法保留控制台那样的格式化样式、只显示单行的问题，下面给你几个实用的解决方案：

方案1：使用预格式化标签保留原始样式 #

这是最简单快速的方法，利用HTML的<pre>标签来保留执行计划的换行、缩进和空格，再配合CSS优化显示效果：

模板代码 #

<table class="query-plan-table">
  <thead>
    <tr>
      <th>查询语句</th>
      <th>执行计划</th>
    </tr>
  </thead>
  <tbody>
    <!-- 遍历你的HashMap，用keyvalue管道处理键值对 -->
    <tr *ngFor="let entry of queryPlanMap | keyvalue">
      <td class="query-column">{{ entry.key }}</td>
      <td class="plan-column">
        <!-- 用pre标签包裹执行计划文本，保留原始格式 -->
        <pre class="execution-plan">{{ entry.value }}</pre>
      </td>
    </tr>
  </tbody>
</table>

CSS样式 #

.query-plan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.query-plan-table th,
.query-plan-table td {
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  text-align: left;
}

.execution-plan {
  /* 使用控制台常用的等宽字体，还原原生显示效果 */
  font-family: 'Courier New', Courier, monospace;
  background-color: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  /* 允许过长的行自动换行，避免横向滚动 */
  white-space: pre-wrap;
  word-wrap: break-word;
  /* 限制高度，超出部分滚动，避免表格过高 */
  max-height: 350px;
  overflow-y: auto;
}

这个方案能完美还原控制台的显示效果，不需要复杂的解析逻辑，适合大多数场景。

方案2：解析执行计划为HTML表格（进阶版） #

如果想把执行计划转换成真正的HTML表格（比如执行计划本身就是结构化的表格文本），可以写一个Angular管道来解析文本，生成表格结构：

1. 创建解析管道 #

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'parsePlanToTable'
})
export class ParsePlanToTablePipe implements PipeTransform {
  transform(planText: string): string[][] {
    if (!planText) return [];

    // 拆分执行计划的每一行，过滤空行
    const lines = planText.split('\n').filter(line => line.trim().length > 0);
    
    // 按多个空格拆分每行的字段（根据你的执行计划格式调整分隔符）
    // 不同数据库的执行计划格式不同，比如MySQL用多空格分隔，PostgreSQL可能有特殊格式
    return lines.map(line => {
      // 匹配连续2个及以上空格作为分隔符
      return line.split(/\s{2,}/).map(segment => segment.trim());
    });
  }
}

2. 在模板中使用管道 #

<td class="plan-column">
  <table class="structured-plan-table">
    <tr *ngFor="let row of entry.value | parsePlanToTable">
      <td *ngFor="let cell of row">{{ cell }}</td>
    </tr>
  </table>
</td>

3. 对应的CSS #

.structured-plan-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Courier New', Courier, monospace;
}

.structured-plan-table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
}

注意：这个方案需要根据你使用的数据库（MySQL/PostgreSQL/Oracle等）的执行计划格式，调整管道中的拆分逻辑，确保能正确分割每个字段。

小提示 #

如果你的执行计划是JSON格式（比如某些数据库支持返回JSON结构的执行计划），可以直接使用Angular的json管道配合样式来展示，或者使用专门的JSON可视化组件，会更方便！

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