angular - 无法删除角度 devextreme 数据网格中标题部分的空格

Question

我正在使用 angular 4 的 devextreme 数据网格，并且在将数据绑定到网格后，我无法删除网格标题中的空白区域。下面是关于我如何指定列的 dx-data-grid 的 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>

下面是代表我在网格标题上的空白区域的附加图像。

任何人都可以帮助就如何删除网格标题上的空白区域提供有关此查询的任何建议。

提前谢谢了。