使用组件将行动态添加到HTML表中

我遇到了一个奇怪的问题，我不明白为什么会这样。 我想使用Angular 4呈现一个HTML表

如果我使用以下语法输出表，一切正常

<tbody>
    <tr *ngFor="let athlete of athletes">
        <td></td>
        <td>{{athlete.name}}</td>
        <td>{{athlete.country}}</td>
        <td>{{athlete.time}}</td>
    </tr>
</tbody>

{{运动员姓名}
{{运动员。国家}
{{运动员时间}

并正确呈现表格：

但如果执行相同的操作，将行的呈现委托给组件，则在Chrome中无法正确呈现表格（但在Edge中是正确的）

这可能是因为“呈现”DOM在查看Google开发工具时是这样的吗


我还尝试将
和
*ngFor
放在组件外部，但问题总是一样的

我在Plunkr上重现了这个问题：
为组件使用属性选择器

运动员.组件.ts

@Component({
  selector: 'tr[app-athlete]',
  template: `
    <td></td>
    <td>{{athlete.name}}</td>
    <td>{{athlete.country}}</td>
    <td>{{athlete.time}}</td>
  `,
})

export class AthleteComponent {
  @Input() athlete: Athlete;
}

@组件({
选择器：“tr[应用程序运动员]”，
模板：`
{{运动员姓名}
{{运动员。国家}
{{运动员时间}
`,
})
导出类AthleteComponent{
@输入（）运动员：运动员；
}

现在，父组件的模板应该如下所示：

<tr app-athlete [athlete]="athlete" *ngFor="let athlete of athletes">
</tr>



之所以发生这种情况，是因为本机chrome表格css希望tr元素直接位于tbody之下。通过将trs委托给组件，您可以在两者之间引入另一个标记。通常，尝试创建在渲染方面自给自足的组件，以便可以单独测试它们。就像您不会为select选项创建组件一样，这里的组件应该包含整个表tags@Mehdi所以你说我应该在一个组件中呈现整个表，即使它使组件和模板的逻辑都大得多？（这只是一个简化的例子，实际上tr的呈现有很多逻辑）
@Component({
  selector: 'tr[app-athlete]',
  template: `
    <td></td>
    <td>{{athlete.name}}</td>
    <td>{{athlete.country}}</td>
    <td>{{athlete.time}}</td>
  `,
})

export class AthleteComponent {
  @Input() athlete: Athlete;
}

<tr app-athlete [athlete]="athlete" *ngFor="let athlete of athletes">
</tr>