使用Angular

Question

我遇到了一个奇怪的问题，我无法理解为什么会这样。 我想使用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>

表格正确呈现：

但是，如果同样的事情将行的rending委托给一个组件，则表格在Chrome中无法正确呈现（但在Edge中是正确的）。

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

athlete.component.html

<tr>
    <td></td>
    <td>{{athlete.name}}</td>
    <td>{{athlete.country}}</td>
    <td>{{athlete.time}}</td>
</tr>

可能是因为在查看Google Dev工具时“渲染”DOM是这样的吗？

我还尝试将<tr>与*ngFor放在组件之外，但问题始终是一样的。

我在Plunkr上重现了这个问题：https://plnkr.co/FZAFEP5S8KhzvdKwBtbH

Answer 1

为组件使用属性选择器

<强> athlete.component.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 app-athlete [athlete]="athlete" *ngFor="let athlete of athletes">
</tr>

<强> Plunker Example