Angular2 template 在angular2中具有嵌套组件的引导表

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

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

和模板：

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

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

父模板：

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

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

---

我做错了什么？

HTML中的Table元素只允许

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

。。。
...
HTML中的Table元素只允许
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>
...

。。。
...
您好，您遇到了什么错误请指定当我将组件作为表行放置时，它不会显示为行，但组件的每个瞬间都在一个单元格中，并且表中有一列未清除。您好，您遇到了什么错误请指定当我将组件作为表行放置时，它不会显示为行，但组件的每一瞬间都在一个单元格中，表中有一列不清楚。我正在尝试做一些非常类似的事情。除此之外，我需要为每个客户提供两个tr元件。因此，我无法将ngFor附加到，因为它只显示一个，并且我无法在一个组件中包装两个s，因为这样我会在s周围获得额外的标记，从而打破表格。您是否尝试将您的两个
包装在
中？这篇文章实际上给了我一个确切的答案：我正在尝试做一些非常类似的事情。除此之外，我需要为每个客户提供两个tr元件。因此，我无法将ngFor附加到，因为它只显示一个，并且我无法在一个组件中包装两个s，因为这样我会在s周围获得额外的标记，从而打破表格。您是否尝试将您的两个
包装在
中？它没有创建包装元素这篇文章实际上给出了我需要的确切答案：