响应式布局bootstrap_中国菲律宾南海仁爱礁最新新闻_如何制作网站免费建站_百度小说排行榜2020前十名

背景：由于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>`};});}