Merge pull request #19758 from abpframework/issue-17543

Angular - Actions button visibility problem on the extensible table component

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

@@ -17,7 +17,7 @@
           *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
         ></ng-container>
         <ng-template #gridActions>
-          @if (hasAvailableActions(i, row)) {
+          @if (hasAvailableActions(row)) {
             <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
           }
         </ng-template>

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

@@ -206,12 +206,20 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     });
   }
 
-  hasAvailableActions(index, data): boolean {
-    const { permission, visible } = this.actionList.get(index)?.value || {};
-    let isActionAvailable = this.permissionService.getGrantedPolicy(permission);
-    if (data && data.record) {
-      isActionAvailable &&= visible(data);
-    }
+  hasAvailableActions(rowData): boolean {
+    let isActionAvailable = true;
+    this.actionList.toArray().map(action => {
+      const { visible, permission } = action;
+      if (rowData && action) {
+        const visibilityCheck = visible({
+          record: rowData,
+          getInjected: this.getInjected,
+        });
+        const permissionCheck = this.permissionService.getGrantedPolicy(permission);
+
+        isActionAvailable = visibilityCheck && permissionCheck;
+      }
+    });
     return isActionAvailable;
   }
 }