Angular2 ngFor始终折叠相同的<tr>

Angular2中的ngFor指令用于在模板中循环渲染一组元素。对于给定的数组或可迭代对象，ngFor会为每个元素创建一个模板实例，并将其插入到DOM中。

对于问题中的具体情况，即在使用ngFor指令时，如果有相同的<tr>元素，导致它们被折叠在一起，可以通过添加一个唯一的标识符来解决这个问题。可以使用Angular提供的trackBy函数来指定一个属性作为唯一标识符，以便Angular能够正确地识别和渲染每个元素。

以下是解决该问题的示例代码：

在组件中定义一个trackBy函数，用于指定<tr>元素的唯一标识符。例如，可以使用一个名为id的属性作为标识符：

@Component({
  // 组件配置
})
export class YourComponent {
  items: any[] = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
    { id: 4, name: 'Item 4' },
    { id: 5, name: 'Item 5' }
  ];

  trackByFn(index: number, item: any): number {
    return item.id;
  }
}

在模板中使用ngFor指令，并通过trackBy属性将trackBy函数绑定到ngFor指令上：

<table>
  <tr *ngFor="let item of items; trackBy: trackByFn">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
  </tr>
</table>

通过以上方式，Angular会根据每个元素的唯一标识符来渲染和更新DOM，确保相同的<tr>元素不会被折叠在一起。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，满足各种计算需求。产品介绍链接
• 腾讯云云数据库 MySQL 版：高性能、可扩展的关系型数据库服务。产品介绍链接
• 腾讯云对象存储（COS）：安全、稳定、高扩展性的云端存储服务。产品介绍链接
• 腾讯云人工智能：提供丰富的人工智能服务和解决方案，包括图像识别、语音识别、自然语言处理等。产品介绍链接
• 腾讯云物联网套件：提供全面的物联网解决方案，包括设备接入、数据管理、应用开发等。产品介绍链接
• 腾讯云区块链服务：提供高性能、可扩展的区块链服务，支持快速搭建和管理区块链网络。产品介绍链接

请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估和决策。