在angular2中嵌套組件的引導表

Question

我是angular2的begginer，我嘗試使用嵌套組件構建引導表，子組件顯示在單個單元中。可能我在用ngFor循環做錯了什麼。這是我的孩子組成：

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core'; 
import { Customer } from '../customer'; 
import { CustomersComponent } from '../customers.component' 

@Component({ 
    selector: 'single-customer', 
    encapsulation: ViewEncapsulation.None, 
    inputs:['customer'], 
    templateUrl: './single-customer.component.html', 
    styleUrls: ['./single-customer.component.css'] 
}) 
export class SingleCustomerComponent implements OnInit { 
    customer: Customer; 

    constructor() { } 

    ngOnInit() { 
    } 
} 

和模板：

<td> 
     {{customer.surname | uppercase}} 
    </td> 
    <td> 
     {{customer.name}} 
    </td> 
    <td> 
     {{customer.phone}} 
    </td> 
    <td> 
     {{customer.mail}} 
    </td> 
    <td> 
     {{customer.comments}} 
    </td> 
    <td><button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target=".update-customer-modal" ng-click="setCustomerData(customer)">Edytuj</button></td> 
    <td><button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target=".delete-customer-modal" ng-click="setCustomerData(customer)">Usuń</button></td> 
<!-- </tr> --> 

父組件：

import { Component, OnInit, Directive, ViewEncapsulation } from '@angular/core'; 
import { NgFor } from '@angular/common'; 
import { SingleCustomerComponent } from './single-customer/single-customer.component'; 
import { Customer } from './customer'; 
import { CustomersService } from './customers.service'; 

@Component({ 
    selector: 'app-customers', 
    encapsulation: ViewEncapsulation.None, 
    templateUrl: './customers.component.html', 
    styleUrls: ['./customers.component.css'], 
    providers: [CustomersService], 
}) 

export class CustomersComponent implements OnInit { 

    customers: Customer[]; 
    customersLength: number; 

    constructor(private _customersService: CustomersService) { 
    } 

    ngOnInit() { 
     this.getCustomers(); 
    } 

    getCustomers(){ 
     this._customersService.getCustomers().then((res) => { 
      this.customers = res; 
      this.customersLength = this.customers.length; 
    }); 
} 
} 

父模板：

<div class="col-md-12"> 
      <div class="table-responsive"> 
       <table class="table table-hover"> 
        <thead> 
         <tr class="info"> 
          <td>ID</td> 
          <td>NAZWISKO</td> 
          <td>IMIĘ</td> 
          <td>TELEFON</td> 
          <td>MAIL</td> 
          <td>URODZINY</td> 
          <td>UWAGI</td> 
          <td></td> 
          <td></td> 
         </tr> 
        </thead> 
        <tbody> 
         <tr *ngFor="let customer of customers"> 
         <single-customer [customer]="customer"></single-customer> 
         </tr> 

        </tbody> 
       </table> 
      </div> 
     </div> 

和家長模塊：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { CustomersComponent } from './customers.component'; 
import { SingleCustomerComponent } from './single-customer/single-customer.component' 

@NgModule({ 
    imports: [ 
    CommonModule, 
    ], 
    declarations: [CustomersComponent, SingleCustomerComponent] 
}) 
export class CustomersModule { } 

我做錯了什麼？

Answer 1

HTML中的表格元素只允許thead，tbody，tfoot和tr作爲孩子。

您可以將您的孩子組件的選擇更改爲：

@Component({ 
    selector: '[single-customer]', 
    ... 
}) 
export class SingleCustomerComponent implements OnInit { 
    ... 

和您的父母模板更改爲：

...  
<tbody> 
    <tr *ngFor="let customer of customers" 
     single-customer 
     [customer]="customer"> 
    </tr> 
</tbody> 
...