Angular-Template：如何将行项显示为普通表行

Question

我有包含表格的父组件模板

<table> 
   <thead>
            <tr>
                <th></th>
                <th>Col 1</th>
                <th>Col 2</th>
                <th>Col 3</th>
                <th>Col 4</th>
                <th>Col 5</th>
                <th>Col 6</th>
                <th>Col 7</th>                         
            </tr>
   </thead>
   <tbody>
          <app-child-component [rows]="rows"></app-child-component>
   </tbody>
</table>

子组件模板

<ng-template ngFor let-item let-i="index" [ngForOf]="row">
  <tr>     
      <td>{{item.value1}}</td>
      <td>{{item.value2}}</td>
      <td>{{item.value3}}</td>
      <td>{{item.value4}}</td>
      <td>{{item.value5}}</td>
      <td>{{item.value6}}</td>
      <td>{{item.value7}}</td>
</tr>
</ng-template>

结果：

我的问题是如何显示为普通表？

Answer 1

您可以为子组件使用属性选择器：

@Component({
  selector: 'tbody[app-child]',
  template: `
    <tr *ngFor="let item of rows">    
        <td></td> 
        <td>{{item.value1}}</td>
        <td>{{item.value2}}</td>
        <td>{{item.value3}}</td>
        <td>{{item.value4}}</td>
        <td>{{item.value5}}</td>
        <td>{{item.value6}}</td>
        <td>{{item.value7}}</td>
    </tr>
  `
})
export class AppChildComponent  {

现在父模板应该如下所示：

<tbody app-child [rows]="rows"></tbody>

<强> Example