标题名称未完全以ag-grid angular 2

Question

我正在为Angular 2使用ag-grid。我有多个标头，如标记号。它没有完全显示。它就像Token N ......

以下是我的component.ts

import { Component, OnInit } from '@angular/core';
import{ GridOptions } from 'ag-grid';

import { FlightProcessGridStatusComponent } from '../flight-process-grid-status/flight-process-grid-status.component';
import { FetchedFlightInfoBean } from '../../_model/FetchedFlightInfoBean';

@Component({
  selector: 'app-user-home-child',
  templateUrl: './user-home-child.component.html',
  styleUrls: ['./user-home-child.component.css'],
  //providers: [FetchedFlightInfoBean]
})
export class UserHomeChildComponent {


    private gridOptions: GridOptions;
    private refreshFlag: boolean;
    fetchedFltBean: FetchedFlightInfoBean [] = [

  {tokenNbr:1, flightNbr:"AY01", flightDate: "12-aug-17", flightBrPoint:"DEL", flightoffPoint:"LKO", nbrPax:2, okEmail:"Y", nonOkEmail:"N", okphn:"Y", nonOkPhn:"N", status:"WAIT"},
  {tokenNbr:2, flightNbr:"AY02", flightDate: "6-aug-17", flightBrPoint:"BAN", flightoffPoint:"MUM", nbrPax:4, okEmail:"N", nonOkEmail:"Y", okphn:"Y", nonOkPhn:"N", status:"MISSED-CONNECTION"},
  {tokenNbr:3, flightNbr:"AY013", flightDate: "22-aug-17", flightBrPoint:"HEL", flightoffPoint:"PAR", nbrPax:1, okEmail:"N", nonOkEmail:"Y", okphn:"Y", nonOkPhn:"N", status:"FLOWN"}
  ];


    constructor() {

        this.gridOptions = <GridOptions>{headerHeight: 48,
                rowHeight: 35,

                rowSelection: 'single',
                enableColResize: true,
                onGridReady: (params) => {
                    params.api.sizeColumnsToFit();
                }


                };


        this.gridOptions.columnDefs = [
            {headerName: 'Token Number', field: 'tokenNbr'},
            {headerName: "Flight Number", field: "flightNbr"},
            {headerName: "Flight Date", field: "flightDate"},
            {headerName: "Flight Boarding Point", field: "flightBrPoint"},
            {headerName: "Flight Off Point", field: "flightoffPoint"},
            {headerName: "NBR of Pax", field: "nbrPax"},
            {headerName: "Ok Email", field: "okEmail"},
            {headerName: "NonOk Email", field: "nonOkEmail"},
            {headerName: "Ok Phone", field: "okphn"},
            {headerName: "NonOk Phone", field: "nonOkPhn"},
            {
                headerName: "Status", 
                field: "status",
                cellRendererFramework: FlightProcessGridStatusComponent,

            }

        ];



         this.gridOptions.rowData = this.createRowData();

    }

    public refreshRowData()
    {
        this.refreshFlag = true;
        alert(`inside refreshRowData`);
        let rowData = this.createRowData();
        this.gridOptions.api.setRowData(rowData);

    }

    private createRowData() {


        if(this.refreshFlag)
            {
                alert(`refresh call`);
            }
        let rowData:FetchedFlightInfoBean[] = this.fetchedFltBean;



       /* let rowDataLength = rowData.length;
        alert(`${rowDataLength}`)
       for (var i = 0; i < rowDataLength; i++) {
            rowData.push({
                tokenNbr: 1,
                flightNbr: "",
                flightDate: "",
                flightBrPoint: "",
                flightoffPoint: "",
                nbrPax: 3,
                okEmail: "",
                nonOkEmail: "",
                okphn: "",
                nonOkPhn: "",
                status: "",
            });
        }
*/      

        return rowData;
    }



}

接下来是我的HTML部分......

    <div style="width: 800px; padding-left: 100px" class="ag-fresh ag-header-cell-label">
    <button (click)="refreshRowData()">Refresh Data</button>
    <button (click)="autoFit()">AutoFit</button>
    <ag-grid-angular style="width: 1000px; height: 1000px;" 
                     [gridOptions]="gridOptions"
                     enableSorting
                     enableFilter >
    </ag-grid-angular>
</div>

我的CSS -

 @import url("https://fonts.googleapis.com/css?family=Raleway:400,700");
.ag-fresh {
  font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}
.ag-fresh .ag-root {
  border: none;

}
.ag-fresh .ag-header-container {
  background: #fff;
}
.ag-fresh .ag-header { 
  border-bottom: 2px solid #000;
}
.ag-fresh .ag-header-row {
  font-weight: bold;
  font-size: 13px;
  line-height: 1em;
  color: #000;
  background: #fff;
  border: none;
}
.ag-fresh .ag-ltr .ag-header-cell {
  padding: 10px;
  border: none
}
.ag-fresh .ag-row {
  border-bottom: 1px solid #ddd;
}
.ag-fresh .ag-row:nth-child(odd){
  border-top: 1px solid #ddd;
  background-color: #f9f9f9;
}
.ag-fresh .ag-row:last-child {
  border-bottom: none;
}
.ag-fresh .ag-row:hover {
  background-color: #d9edf7;
  border-top: 1px solid #aaa;  
  border-color: #aaa;
}
.ag-fresh .ag-row .ag-cell {
  color: #333;
  padding: 10px 15px;
}
.ag-fresh .ag-row .ag-cell:focus,
.ag-fresh .ag-row .ag-cell:hover {
  font-weight: bold;
  background-color: #d0edf3 ;
  color:#000;
}

.ag-header-cell-label {
    text-overflow: clip;
    overflow: visible;
    white-space: normal;
}

在我的组件中，您可以看到我使用params.api.sizeColumnsToFit（）修复了列的大小。这允许我的列显示没有水平滚动条。所以我在一个视图中获得完整的数据。

但是现在我的列标题并没有在那里形成名称。我没有显示完整的名称。 例如，如果列标题是令牌号，那么只有＆＃34;令牌n ...＆＃34;显示此部分。

请帮忙。