使用Angular2和Bootstrap 4表

Question

创建其他栏这是我表

<table class="table table-bordered"> 
     <thead> 
      <tr> 
       <th *ngFor="let th of tableHeaders"> {{th}} 
        <th> 
      </tr> 
     </thead> 
     <tbody *ngIf="tableData.length"> 
      <tr *ngFor="let tr of tableData"> 
       <td *ngFor="let th of tableHeaders; let i = index">{{i}} 
        <td> 
      </tr> 
     </tbody> 
    </table> 

附件是我的输出图像的HTML。

随着值我其明确我只有9列，但生成的列是10.你可以看到一个空白的列后城市。

这是为什么？我如何克服那空白的专栏。

Answer 1

虽然是在<td>一个小姐，我想建议的处理，这可以在应用程序中使用将是一个公用表组件一个更好的方式

import {Component, NgModule} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <table class="table table-responsive"> 
     <thead> 
      <tr> 
       <th *ngFor="let column of tableConfiguration.columns;" 
       class="col-md-{{column.columnSize}}"> 
       {{column.title}}<th> 
      </tr> 
     </thead> 
    </table> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    tableConfiguration:TableConfiguration; 
    constructor() { 
    this.tableConfiguration ={ 
     columns:new Array<Column>() 
    } 
    this.tableConfiguration.columns= 
     [{title: 'First Name',columnSize:3}, 
      {title: 'Last Name',columnSize:3}, 
      {title: 'Contact Number',columnSize:2}, 
      {title: 'Gender',columnSize:2}, 
      {title: 'City',columnSize:2}]; 

    this.name = 'Angular2 Dynamic table' 
    } 
} 
export interface TableConfiguration{ 
    columns:Array<Column>; 
} 
export interface Column{ 
    title:string; 
    columnSize:number; 
} 
@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

LIVE DEMO

备注：

1. 变化，如你所愿
2. ColumnSize应增加至12，因为它是默认的引导
3. 使用此功能可以通过使用它CommonModule内跨应用程序包的选择