Angular-模板：如何将行项目显示为普通 table 行

Question

我的父组件模板包含 table

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

结果：

我的问题是如何才能正常显示table？

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

Angular-模板：如何将行项目显示为普通 table 行

Angular-Template: How to display the row item as a normal table row

html-table

angular2-template

angular