如何创建自定义可重用组件以在 Primeng Table 中显示空消息？

Question

我在项目中使用 primeng 表，并尝试创建一个自定义可重用组件，以在没有可用数据时显示空消息。因此，在我的组件中，如果我有以下代码，它就可以正常工作。

<ng-template pTemplate="emptymessage">
      <tr>
        <td colspan="12" class="empty-message">
          <div class="empty-message-container">No Data</div>
        </td>
      </tr>
</ng-template>

但是，当我创建自定义组件并在此处调用它时，它只是显示空消息，但 colspan 不起作用。下面是我的自定义组件的代码。

HTML代码：

<tr>
 <td [attr.colspan]="colspan" class="empty-message">
  <div class="empty-message-container">No Data</div>
 </td>
</tr>

T代码：

import {Component, Input} from '@angular/core';
import {TableModule} from "primeng/table";

@Component({
 selector: 'app-table-empty-message',
 standalone: true,
 imports: [TableModule],
 templateUrl: './table-empty-message.component.html',
 styleUrl: './table-empty-message.component.scss'
})
export class TableEmptyMessageComponent {
 @Input() colspan: number = 1;
}

CSS代码：

.empty-message {
  padding: 20px;
}

.empty-message-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
 }

我在代码中调用自定义组件，如下所示：

<ng-template pTemplate="emptymessage">         
      <app-table-empty-message [colspan]="11"></app-table-empty-message>
    </ng-template>

这只会显示“无数据”消息，但不会显示在中心。

如有任何帮助，我们将不胜感激。预先感谢！

最诚挚的问候， 镍丁

Answer 1

仅显示“无数据”消息，但不在中心显示，因为

app-table-empty-message

选项卡对

tbody

无效。

您可以将组件的选择器调整为

tr[app-table-empty-message]

HTML代码

 <td [attr.colspan]="colspan" class="empty-message">
  <div class="empty-message-container">No Data</div>
 </td>

TS代码

import {Component, Input} from '@angular/core';
import {TableModule} from "primeng/table";

@Component({
 selector: 'tr[app-table-empty-message]',
 standalone: true,
 imports: [TableModule],
 templateUrl: './table-empty-message.component.html',
 styleUrl: './table-empty-message.component.scss'
})
export class TableEmptyMessageComponent {
 @Input() colspan: number = 1;
}

使用

<ng-template pTemplate="emptymessage">         
  <tr app-table-empty-message [colspan]="11" ></tr>
</ng-template>