如何以角度组件化 html 表格的每一行

Question

我是 Angular 的新手。我想使用 ngFor 将 html 表的每一行渲染为单独的组件。我尝试了一种方法但失败了。

StackBlitz 链接 - https://stackblitz.com/edit/angular-yaie9e?file=src%2Fapp%2Fapp.component.html

在上面的 stackblitz 链接中，我使用整个表格的单个组件渲染表格，并使用两个组件渲染另一个类似的表格。一个用于主表，另一个用于表数据。为什么后者渲染不正确？或者具体来说为什么它在第一列下呈现？

Answer 1

我不确定为什么<tr>当它是组件的根元素时不能正确渲染，也许其他人可以回答这个问题。对我有用的一种方法是使用属性选择器而不是元素选择器。

应用程序组件.html

...
<tbody>
  <ng-container *ngFor="let venue of venues">
    <tr app-row [venue]="venue"></tr>
  </ng-container>
</tbody>
...

应用程序行.component.ts

@Component({
  selector: '[app-row]',
  templateUrl: './row.component.html',
  styleUrls: [ './row.component.css' ]
})
export class RowComponent implements OnInit  { ... }

应用程序行.component.html

<td>{{venue.venueName}}</td>
<td>{{venue.userName}}</td>
<td>{{venue.hb}}</td>

https://stackblitz.com/edit/angular-ymyu2q