背景：由于ngx-dataable插件默認沒有數據時顯示的文案是no data to display，且沒有任何樣式。這里希望通過自定義模板來實現。但目前github中有一個案例是通過設置代碼：
https://swimlane.github.io/ngx-datatable/empty**
<ngx-datatableclass="material"[rows]="[]"[columns]="columns"[columnMode]="ColumnMode.force"[headerHeight]="50"[footerHeight]="50"><div empty-content style="text-align: center;">My custom empty component<br />uses two lines.</div></ngx-datatable>
我嘗試了下，沒有效果估計是要angular17+以上吧，而我目前對于升級angular不太被支持，因此有了以下成功的解決方案，即嵌入一個自定義模板：
當前版本：angular16+ts+“@swimlane/ngx-datatable”: “^20.1.0”
html
<ngx-datatable......[messages]="messages"></ngx-datatable>
ts
messages = {emptyMessage: `<div id="ngxEmptyMessage" class="ngxEmptyMessage"><img class="emptyImg" src="./assets/icons/icon_frame.png"><span class="emptyMessage">No results</span></div>`}
sass/css
::ng-deep .ngxEmptyMessagedisplay: flexflex-direction: columnjustify-content: centeralign-items: center.emptyMessagecolor: #999font-size: 14pxline-height: 22pxmargin-top: 8px.emptyImgwidth: 42pxheight: 42px
::ng-deep .ngx-datatable.material .empty-rowheight: autopadding: 130px 0
效果如圖：
如果要給文案加上國際化，比如{{‘common.no-data’|translate}}，是不可行的，解決方式如下：
只貼基于上面修改到的代碼：核心就是改成${this.translate.instant(‘common.no-data’)}，然后添加監控，實時獲取國際化
import {TranslateService} from "@ngx-translate/core";messages = {emptyMessage: `<div id="ngxEmptyMessage" class="ngxEmptyMessage"><img class="emptyImg" src="./assets/icons/icon_frame.png"><span class="emptyMessage">${this.translate.instant('common.no-data')}</span></div>`};constructor(private translate: TranslateService ) {}ngOnInit(): void {this.translate.onLangChange.subscribe(() => {this.updateEmptyMessage();});}updateEmptyMessage() {this.translate.get('common.no-data').subscribe((translation: string) => {this.messages = {emptyMessage: `<div id="ngxEmptyMessage" class="ngxEmptyMessage"><img class="emptyImg" src="./assets/icons/icon_frame.png"><span class="emptyMessage">${this.translate.instant('common.no-data')}</span></div>`};});}
)
