javascript - 如何以 Angular 对html表的每一行进行组件化

Question

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

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

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

Answer 1

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

app.component.html

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

app-row.component.ts

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

app-row.component.html

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

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