使用Angular2和Bootstrap 4表创建的附加列 [英] Additional Column Created using Angular2 and Bootstrap 4 table

问题描述

这是我的表格HTML

This is my HTML for table

<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.您可以在城市后看到空白列.

With the value of i its clear i got only 9 columns but the generated columns were 10. You could see a blank column after city.

那是为什么?我该如何克服空白列.

Why is that? How can i overcome that blank column.

推荐答案

虽然在< td> 中是一个遗漏，但我想推荐一种更好的方法来处理通用表Component，该方法可以在整个应用程序中都可以使用

Though it was a miss in <td> I would like to recommend a better way of handling a common table Component which can be used across application would be as

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中使用它来包装整个应用程序

这篇关于使用Angular2和Bootstrap 4表创建的附加列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！