使用 Angular 将使用组件的行动态添加到 HTML 表中答案

【问题标题】：Dynamically adding rows using components into HTML table with Angular使用 Angular 将使用组件的行动态添加到 HTML 表中
【发布时间】：2017-12-11 17:42:34
【问题描述】：

我遇到了一个奇怪的问题，我不明白为什么会这样。我想使用 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 中是正确的）。

<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>

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

我还尝试将<tr> 和*ngFor 放在组件之外，但问题始终相同。

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

【问题讨论】：

发生这种情况是因为表格的原生 chrome css 期望 tr 元素直接位于 tbody 下方。通过将 trs 委托给组件，您可以在两者之间引入另一个标签。通常，尝试创建在渲染方面自给自足的组件，以便您可以单独测试它们。就像您不会为选择选项创建组件一样，您的组件在这里应该包含整个表格标签
@Mehdi 所以你说我应该只在一个组件中渲染整个表格，即使它使组件和模板的逻辑都更大？（这只是一个简化的例子，实际上tr的渲染有很多逻辑）

标签： html angular

【解决方案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

【讨论】：