Bootstrap-Tabelle mit verschachtelten Komponenten in angular2

Question

Ich bin der Begginer mit angular2, und ich versuche, Bootstrap-Tabelle mit verschachtelten Komponenten zu erstellen, wird die untergeordnete Komponente in Einzelzelle angezeigt. Wahrscheinlich mache ich etwas falsch mit ngFor Schleife. Das ist mein Kind Komponente:

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() { 
    } 
} 

und Vorlage:

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

Geordnete Komponente:

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; 
    }); 
} 
} 

Mutter Vorlage:

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

und Eltern-Modul:

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

Was mache ich falsch?

Answer 1

Tabellenelement in HTML erlaubt nur thead, tbody, tfoot und tr als Kinder.

können Sie Ihre Kinder Komponente Wähler ändern:

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

Und Ihre Eltern Vorlage ändern:

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