refactor: set visible and value props to data of extensible table

resolves #4865

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

@@ -27,11 +27,11 @@
       [sortable]="prop.sortable"
     >
       <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
-        <ng-container
-          *abpPropData="let data; fromList: propList; withRecord: row; atIndex: i"
-          [abpPermission]="prop.permission"
-        >
-          <div *ngIf="prop.visible(data)" [innerHTML]="getContent(prop, data) | async"></div>
+        <ng-container [abpPermission]="prop.permission">
+          <div
+            *ngIf="row[prop.name + 'Visible']"
+            [innerHTML]="row[prop.name + 'Value'] | async"
+          ></div>
         </ng-container>
       </ng-template>
     </ngx-datatable-column>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.ts

@@ -9,6 +9,11 @@ import {
   LOCALE_ID,
   TemplateRef,
   TrackByFunction,
+  Type,
+  InjectionToken,
+  InjectFlags,
+  SimpleChanges,
+  OnChanges,
 } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -25,7 +30,7 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
   templateUrl: './extensible-table.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ExtensibleTableComponent<R = any> {
+export class ExtensibleTableComponent<R = any> implements OnChanges {
   @Input() actionsText: string;
   @Input() data: R[];
   @Input() list: ListService;
@@ -35,6 +40,8 @@ export class ExtensibleTableComponent<R = any> {
   }
   @Input() actionsTemplate: TemplateRef<any>;
 
+  getInjected: <T>(token: Type<T> | InjectionToken<T>, notFoundValue?: T, flags?: InjectFlags) => T;
+
   readonly columnWidths: number[];
 
   readonly propList: EntityPropList<R>;
@@ -42,6 +49,8 @@ export class ExtensibleTableComponent<R = any> {
   readonly trackByFn: TrackByFunction<EntityProp<R>> = (_, item) => item.name;
 
   constructor(@Inject(LOCALE_ID) private locale: string, injector: Injector) {
+    // tslint:disable-next-line
+    this.getInjected = injector.get.bind(injector);
     const extensions = injector.get(ExtensionsService);
     const name = injector.get(EXTENSIONS_IDENTIFIER);
     this.propList = extensions.entityProps.get(name).props;
@@ -85,4 +94,18 @@ export class ExtensibleTableComponent<R = any> {
       }),
     );
   }
+
+  ngOnChanges({ data }: SimpleChanges) {
+    if (!data?.currentValue) return;
+
+    this.data = data.currentValue.map((record, index) => {
+      this.propList.forEach(prop => {
+        const propData = { getInjected: this.getInjected, record, index } as any;
+        record[`${prop.value.name}Visible`] = prop.value.visible(propData);
+        record[`${prop.value.name}Value`] = this.getContent(prop.value, propData);
+      });
+
+      return record;
+    });
+  }
 }