Angular中双击网格生成动态导航标签页并绑定数据的实现问题

实现步骤 #

1. 调整component.ts逻辑

你现在只把行id存入tabs数组，后续无法获取完整的行数据，所以需要把完整的行数据存入数组，同时可以加去重逻辑避免重复打开同一行的标签：

// 定义tabs数组存储完整行数据
tabs: any[] = [];
// 可选：记录已打开的行id，避免重复生成标签
openedIds = new Set<number | string>();

onDoubleClick(e){
  const rowData = e.data;
  // 已打开的行直接跳过
  if(this.openedIds.has(rowData.id)) return;
  this.openedIds.add(rowData.id);
  this.tabs.push(rowData);
}

如果需要支持关闭标签，额外补充移除逻辑即可。

2. 调整component.html模板

你现有代码的问题是所有标签都写死了同一个href和id，导致无法和内容区关联，需要把所有和id相关的属性改为动态绑定，同时循环生成内容区：

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <!-- 注意ngFor的语法是of不是for，之前的写法有语法错误 -->
  <li class="nav-item" *ngFor="let tab of tabs">
    <a 
      class="nav-link" 
      id="tab-{{tab.id}}-nav" 
      data-toggle="tab" 
      href="#tab-{{tab.id}}" 
      role="tab" 
      aria-controls="tab-{{tab.id}}" 
      aria-selected="false"
    >
      <!-- 可自定义标签显示的标题，比如取行数据的名称字段 -->
      数据行{{tab.id}}
    </a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">{Grid comes here}</div>
  <!-- 循环生成每个标签对应的内容区 -->
  <div 
    class="tab-pane fade" 
    *ngFor="let tab of tabs"
    id="tab-{{tab.id}}" 
    role="tabpanel" 
    aria-labelledby="tab-{{tab.id}}-nav"
  >
    <!-- 直接读取tab对象的字段展示对应数据即可 -->
    <div>当前行ID：{{tab.id}}</div>
    <div>行名称：{{tab.name}}</div>
    <!-- 其他需要展示的字段都可以从tab对象中直接获取 -->
  </div>
</div>

核心说明 #

• 所有标签导航和内容区的id都通过行id动态拼接，保证全局唯一，不会出现关联错误
• 完整行数据存在tabs数组中，内容区可以直接读取所有字段，不需要额外查询
• 如果你的项目用的是ng-bootstrap封装的tab组件，核心逻辑完全一致，只是把原生bootstrap的data-toggle属性换成对应ng-bootstrap的指令即可

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