无法删除角DEVEDATA数据网格中标题部分的空白

我正在使用DeWestRead数据网格与角4,以及如何在绑定数据到网格之后,无法删除网格头中的空白。 下面是关于如何指定列的dx数据网格的HTML代码。

    <dxo-remote-operations [sorting]="true" [paging]="true"></dxo-remote-operations>
    <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
    <dxo-paging [pageSize]="10"></dxo-paging>
    <dxo-pager [showInfo]="true" [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 50]"></dxo-pager>

    <div *dxTemplate="let rating of 'RatingTemplate'">
        <p>{{rating.value.Rating}}</p>
    </div>
    <div *dxTemplate="let share of 'ShareTemplate'">
        <p>{{share.value.Share}}</p>
    </div>

    <div *dxTemplate="let temp of 'Template'">
        <p>{{temp.value.People}}</p>
    </div>

    <div *dxTemplate="let data of 'ReportTemplate'">
        <a href="JavaScript:void(0)"  (click)="ReportTitleClick(data.row)">{{data.value}}</a>
    </div>

    <div *dxTemplate="let data of 'STemplate'">
        <div *ngIf="data.value === 3">
            <a href="JavaScript:void(0)" (click)="Show(data)">Mo</a>
        </div>
        <div *ngIf="data.value !== 3">
            <a href="JavaScript:void(0)" (click)="Show(data)">TB</a>
        </div>
    </div>

    <div *dxTemplate="let change of 'changeButton'" class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" appNgBoostrapDropdown data-toggle="dropdown">Change
            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li *ngFor="let data of changeOptions" (click)="changewizard(data)"><a>{{data.text}}</a></li>
        </ul>
    </div>
</dx-data-grid>

下面是附加的图像,它代表我在网格头上得到的空白空间。

请任何人就如何删除网格标题上的空白提出建议。

非常感谢。