Merge pull request #3516 from abpframework/fix/3497

Fixed ExpressionChangedAfterItHasBeenCheckedError on table resize

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.html

@@ -62,22 +62,20 @@
 </ng-template>
 
 <ng-template #body>
-  <tbody class="ui-table-tbody">
-    <ng-container *ngIf="value && value.length; else emptyTemplate">
-      <ng-template
-        #bodyTemplateWrapper
-        *ngFor="let val of slicedValue; let index = index; trackBy: trackByFn"
-        [ngTemplateOutlet]="bodyTemplate"
-        [ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }"
-      ></ng-template>
-    </ng-container>
+  <tbody class="ui-table-tbody" *ngIf="value && value.length; else emptyTemplate">
+    <ng-template
+      #bodyTemplateWrapper
+      *ngFor="let val of slicedValue; let index = index; trackBy: trackByFn"
+      [ngTemplateOutlet]="bodyTemplate"
+      [ngTemplateOutletContext]="{ $implicit: val, rowIndex: index }"
+    ></ng-template>
   </tbody>
 </ng-template>
 
 <ng-template #emptyTemplate>
-  <tr class="empty-row" #emptyRow>
-    <div class="empty-row-content" [style.width.px]="emptyRow.offsetWidth">
-      {{ emptyMessage | abpLocalization }}
-    </div>
-  </tr>
+  <caption class="ui-table-empty">
+    {{
+      emptyMessage | abpLocalization
+    }}
+  </caption>
 </ng-template>

npm/ng-packs/packages/theme-shared/src/lib/components/table/table.component.scss

@@ -6,13 +6,11 @@
     filter: brightness(90%);
   }
 
-  .ui-table-tbody > tr.empty-row:hover {
-    filter: none;
-  }
-
-  .ui-table-tbody > tr.empty-row > div.empty-row-content {
-    padding: 10px;
+  .ui-table-empty {
+    padding: 20px 0;
     text-align: center;
+    border: 1px solid #e0e0e0;
+    border-top-width: 0;
   }
 
   .ui-table-caption,

npm/ng-packs/packages/theme-shared/src/lib/tests/table.component.spec.ts

@@ -1,8 +1,7 @@
-import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
-import { PaginationComponent, TableComponent } from '../components';
-
 import { Pipe, PipeTransform } from '@angular/core';
 import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
+import { PaginationComponent, TableComponent } from '../components';
 
 @Pipe({
   name: 'abpLocalization',
@@ -40,7 +39,7 @@ describe('TableComponent', () => {
     });
 
     it('should display the empty message', () => {
-      expect(spectator.query('tr.empty-row>div')).toHaveText(
+      expect(spectator.query('caption.ui-table-empty')).toHaveText(
         'AbpAccount::NoDataAvailableInDatatable',
       );
     });