Question

这是我的表格HTML

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

附件是我的输出图像。

使用 i 的值清除我只有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

注意：

根据需要更改选择器
ColumnSize应该添加到12，因为它是bootstrap中的默认值
使用它在CommonModule中使用它来包装应用程序

附加列使用Angular2和Bootstrap 4表创建

1 个答案: