使用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內跨應用程序包的選擇