html - 如何以调整大小以在一行中显示整个日期的方式更改 Angular 中的列

Question

我正在创建一个表单，一旦我搜索，它就会在一个 ag 网格角度表中给出结果。

列中的数据有时会中断并导致它在 2 行而不是 1 行中，如何根据每个数据字符串的长度使列的大小发生变化（如果需要，使附近的其他列更小）？

<div class="content" id="ults-container">
    <div class="container">     
</div>
</div>

<div *ngIf="Value">
    <div *ngIf="noData" style="text-align: center" class="alert-danger alert">No ults found</div>
    <div *ngIf="!noData">
        <div class="dashvue-content">
      <search-details [totalCount]="Service.wildcardTotalCount"
                                      [errorMessage]=" Service.wildcardErrorMessage">
            </search-details>

<div id="grid-wrapper" class="container w-100 h-100" *ngIf="!noData">

                <ag-grid-angular
                    #agGrid
                    style="width: 100%; height: 135px;"
                    id="myGrid"
                    class="theme-balham"
                    [rowData]="Service.wildcardSearchult"
                    [gridOptions]="apiGlob.gridOptions"
                    [columnDefs]="colDefs"
                    (columnMoved)="apiGlob.onColumnMoved($event, agGridColNm)"
                    (columnPivotChanged)="apiGlob.onColumnMoved($event, agGridColNm)"
                    (columnized)="apiGlob.onColumnized($event, agGridColNm)"
                    (columnVisible)="apiGlob.onColumnVisible($event)"
                    (gridReady)="apiGlob.onGridReady($event, agGridColNm)"
                    [overlayNoRowsTemplate]="apiGlob.noRowsTemplate"

                >

                </ag-grid-angular>

             
            </div>
            <div style="padding-top:15px;text-align:center"
                 class="container w-100">
                <div style="display:inline-block;">
                    <div style="display:inline-block;width:40px;text-align:center;">
                        <button [ngClass]="{'btn-paginator': Service.pageNum != 1,
                        'btn-paginator-disabled': Service.pageNum == 1}"
                                (click)="goToPage(1)"><<
                        </button>
                    </div>
                    <span style="color:#dedede">|</span>
                    <div style="display:inline-block;width:35px;text-align:center;">
                        <!--  *ngIf="Service.pageNum > 1"-->
                        <button [ngClass]="{'btn-paginator': Service.pageNum != 1,
                        'btn-paginator-disabled': Service.pageNum == 1}"
                                (click)="prevPage()">< </button>
                    </div>
                    <div style="display:inline-block;">
                        <a href="javascript:void(0)" class="current-page">{{Service.pageNum}}</a>
                    </div>
                    <div style="display:inline-block;width:35px;text-align:center;">
                        <button [ngClass]="{'btn-paginator': Service.pageNum != Service.wildcardLast, 'btn-paginator-disabled': Service.pageNum == Service.wildcardLast || Service.wildcardLast == null}"
                                (click)="nextPage()"><!-- {{Service.pageNum+1}} -->>
                        </button>
                    </div>
                    <span style="color:#dedede">|</span>
                    <div style="display:inline-block;width:40px;text-align:center;">
                        <button [ngClass]="{'btn-paginator': Service.pageNum != Service.wildcardLast, 'btn-paginator-disabled': Service.pageNum == Service.wildcardLast || Service.wildcardLast == null}"
                                (click)="goToPage(Service.wildcardLast)">>>
                        </button>
                    </div>
                </div>
                <div style="display:inline-block;float:right">Go to Page:
                    <input style="width:40px" value="{{Service.pageNum}}" id="pageSearchInput" [(ngModel)]="pageSearchInput"
                           (change)="goToPageInput()" placeholder="{{Service.pageNum}}">
                    /{{Service.wildcardLast}}
                </div>
            </div>

            <router-outlet id="Route"></router-outlet>
        </div>
    </div>
</div>

标签： htmlangularag-grid-angular