javascript - 使用角度 13 在 ejs-grid 中自定义无记录模板

Question

使用ejs-grid角度并尝试自定义No Records data模板无法做到

<ejs-grid #assetGrid id="asset_grid" class="scrollable-body-grid"
                          (dataBound)='dataBound($event)'
                          [height]='gridBodyCalculatedHeight'
                          [dataSource]='assetList | async'
                          [enableHover]='false'
                          [searchSettings]='false'
                          allowPaging='true'
                          allowSorting="true"
                          [allowResizing]='true'
                          [pageSettings]='pageSettings'
                          (dataStateChange)='dataStateChange($event)'
                          [toolbar]="toolbar"
                          allowExcelExport='true'
                          (toolbarClick)='toolbarClickHandler($event)'
                          showColumnChooser='true'>
                    <e-columns>
                        <ng-template #template ngFor let-column [ngForOf]="gridColumns">
                            <ng-container *ngIf="column.field === 'name'">
                                <e-column [field]="column.field" [width]="column.width" [visible]="column.field !== 'id' && column.field !== 'vendorId'"
                                          [headerText]="column.headerText">
                                    <ng-template #template let-data>
                                        <a class="gridLink" title="{{data.name}}" (click)="openAsset(data)">{{data.name}}</a>
                                    </ng-template>
                                </e-column>
                            </ng-container>
                            <ng-container *ngIf="column.field !== 'name'">
                                <e-column [field]="column.field" [width]="column.width" [visible]="column.field !== 'id' && column.field !== 'vendorId'"
                                          [headerText]="column.headerText" [showInColumnChooser]="column.field !== 'id' && column.field !== 'vendorId'">
                                </e-column>
                            </ng-container>

                        </ng-template>
                    </e-columns>
                    <ng-template #EmptyRecordTemplate>
                        custom text
                      </ng-template>
                </ejs-grid>

从这个参考https://www.syncfusion.com/feedback/24388/no-easy-angular-way-to-change-no-records-text，我发现emptyRecordTemplate，但它不工作。

<ng-template #emptyRecordTemplate>
    custom text
  </ng-template>

更新

 setTimeout(function () {
            // Grid’s empty row content element is retrieved
            var emptyRowEle = this.assetGrid.element.querySelector('.e-emptyrow td');
            // The default contents are removed from the element
            emptyRowEle.innerHTML = "<p class='w-100 text-center'><span class='font-bold'>No results</span><br />Try adjusting your search by changing or removing search text.</p>";
        }.bind(this), 5)

能够将文本居中对齐

Answer 1