本文介绍了angular2 中带有嵌套组件的 Bootstrap 表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 angular2 的初学者，我尝试使用嵌套组件构建引导表，子组件显示在单个单元格中.可能我在 ngFor 循环上做错了什么.这是我的子组件:
import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';从'../customer'导入{客户}；从'../customers.component'导入{客户组件}@成分({选择器:'单一客户'，封装:ViewEncapsulation.None，输入:['客户']，templateUrl: './single-customer.component.html',styleUrls: ['./single-customer.component.css']})导出类 SingleCustomerComponent 实现 OnInit {客户:客户；构造函数(){}ngOnInit() {}}和模板:
{{客户.姓氏 |大写}}</td><td>{{顾客姓名}}</td><td>{{客户.电话}}</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';从 '@angular/common' 导入 { NgFor };import { SingleCustomerComponent } from './single-customer/single-customer.component';从'./customer'导入{客户}；从'./customers.service'导入{客户服务}；@成分({选择器:'应用程序客户'，封装:ViewEncapsulation.None，templateUrl: './customers.component.html',styleUrls: ['./customers.component.css'],提供者:[CustomersService]，})导出类 CustomersComponent 实现 OnInit {客户:客户[]；客户长度:数量；构造函数(私有_customersService:CustomersService){}ngOnInit() {this.getCustomers();}获取客户(){this._customersService.getCustomers().then((res) => {this.customers = res;this.customersLength = this.customers.length;});}}
父模板:
<div class="table-responsive"><table class="table table-hover"><头><tr class="信息"><td>ID</td><td>纳兹维斯科</td><td>IMIĘ</td><td>TELEFON</td><td>邮件</td><td>URODZINY</td><td>UWAGI</td><td></td><td></td></tr></thead><tr *ngFor="让客户的客户"><single-customer [customer]="customer"></single-customer></tr></tbody>和父母模块:
import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；从'./customers.component'导入{CustomersComponent}；import { SingleCustomerComponent } from './single-customer/single-customer.component'@NgModule({进口:[通用模块，],声明:[CustomersComponent, SingleCustomerComponent]})导出类客户模块 { }
我做错了什么?
解决方案 HTML 中的表格元素只允许 thead、tbody、tfoot 和tr 作为孩子.
您可以将子组件的选择器更改为:
@Component({选择器:'[单一客户]'，...})导出类 SingleCustomerComponent 实现 OnInit {...
并将您的父模板更改为:
...<tr *ngFor="让客户的客户"单一客户[客户]="客户"></tr></tbody>...I'm the begginer with angular2, and i try to build bootstrap table with nested components, the child component is display in single cell. Probably I'm doing something wrong with ngFor loop. This is my child component:
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() {
}
}
and template:
<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> -->
Parent component:
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;
});
}
}
parent template:
<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>
and parents module:
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 { }
What I'm doing wrong?
解决方案 Table element in HTML just allows thead, tbody, tfoot and tr as children.
You can change your children component's selector to:
@Component({
selector: '[single-customer]',
...
})
export class SingleCustomerComponent implements OnInit {
...
And change your parent template to:
...
<tbody>
<tr *ngFor="let customer of customers"
single-customer
[customer]="customer">
</tr>
</tbody>
...
这篇关于angular2 中带有嵌套组件的 Bootstrap 表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！
09-02 03:17