Angular ag-grid如何有条件地渲染标题答案

【问题标题】：Angular ag-grid how to conditionally render headerAngular ag-grid如何有条件地渲染标题
【发布时间】：2021-11-03 17:23:18
【问题描述】：

我是 Angular 的 ag-grid 新手。我有简单的 html 表来列出用户。我想为此使用 ag-grid。如果没有权限，有几列不应该显示。我不确定如何使用 ag-grid 来实现这一点。谁能帮我实现这一目标？

现有的html表：

<table>
  <thead>
    <tr>
      <th width="30">&nbsp;</th>
      <th>Name</th>
      <ng-container *requireAnyPermission="[SensitiveAccessPermission]">
        <th>Modified by</th>
        <th>Modified date</th>
      </ng-container>
      <th *requireAnyPermission="[SensitiveAccessPermission]">Active</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let person of people">
        <td>&nbsp;</td>
        <td data-label="Name">{{ person.name }}</td>
        <ng-container *requireAnyPermission="[SensitiveAccessPermission]">
          <td data-label="Modified by">{{ person.modifiedBy }}</td>
          <td data-label="Modified date">
           {{ person.modified | dateTimeFormat }}
          </td>
        </ng-container>
        <td *requireAnyPermission="[SensitiveAccessPermission]" data-label="Active">
          <ng-container *ngIf="person.isActive; then checkTemplate"></ng-container>
        </td>       
      </tr>
  </tbody>
</table>

我的 ag-grid 列定义如下：

const COLUMNS: ColDef[] = [
  { headerName: '', field: '' },
  { headerName: 'Name', field: 'name', filter: true },
  { headerName: 'Modified by', field: 'modifiedBy', filter: true },
  { headerName: 'Modified date', field: 'modified', filter: true },
  { headerName: 'Active', field: 'isActive', filter: true },
];

如何使用 ag-grid 实现相同的效果。

*requireAnyPermission 是自定义指令

@Directive({
  // tslint:disable-next-line: directive-selector
  selector: '[requireAnyPermission]'
})
export class RequireAnyPermissionDirective implements OnDestroy {
  private _onDestroy = new Subject();
  private _reverse = false;
  private _anyPermissions: Array<string | PermissionCodeWithMask>;

  @Input() set requireAnyPermission(
    permissions: Array<string | PermissionCodeWithMask>
  ) {
    this._anyPermissions = permissions;
    this.updateView();
  }

  @Input() set requireAnyPermissionReverse(reverse: boolean) {
    this._reverse = reverse;
    this.updateView();
  }

  constructor(
    private templateRef: TemplateRef<HTMLElement>,
    private viewContainerRef: ViewContainerRef,
    private userService: UserService
  ) {}

  ngOnDestroy(): void {
    this._onDestroy.next();
  }

  private updateView() {
    if (this._anyPermissions) {
      this.userService
        .userHasAnyPermissions(this._anyPermissions)
        .pipe(takeUntil(this._onDestroy))
        .subscribe((hasPermission) => {
          this.viewContainerRef.clear();
          if (
            (hasPermission && !this._reverse) ||
            (!hasPermission && this._reverse)
          ) {
            this.viewContainerRef.createEmbeddedView(this.templateRef);
          }
        });
    }
  }
}

谢谢

【问题讨论】：

标签： ag-grid ag-grid-angular angular11

【解决方案1】：

您可以通过基于用户拥有的权限以编程方式构造列定义数组或在组件初始化时从COLUMNS 中删除要隐藏的列来做到这一点

在这两种情况下，您都必须调用

gridOptions.api.setColumnDefs(columnDefs);

完成后

查看更新列定义示例here 你想做类似的事情。

【讨论】：

【解决方案2】：

您可以显示/隐藏列：-

 this.gridColumnApi.setColumnsVisible([...visibleCols], true);  // show columns
 this.gridColumnApi.setColumnsVisible([...hiddenCols], false);  // hide columns

如果你想要那些列，在网格中不可用：-

为网格创建columnDefs时，不要有条件地添加columnDefs

【讨论】：

【解决方案3】：

在我看来，这是一种简单的方法（* 适用于大项目和多次更改）

首先获取网格样的所有列列表。

 getKeys(obj: []) {
    var keys = [];
    for (var key in obj) {
      keys.push(key);
    }
    return keys;
  }

这个 getKeys 方法为你提供了 over array 的所有 ColumnName

    //item is json response from over server.
var columns = this.getKeys(item[0]);
var colObj = {};
var gridcolumnDefs = [];

for (var i = 0; i & lt; columns.length; i++) {
  var visible = true;

  switch (columns[i].toLocaleLowerCase()) {

    case 'columnname1':
      colObj = {
        field: columns[i],
        sortable: false
      }
      break;
    case 'columnname2':
      visible = false;
      colObj = {
        field: columns[i],
        sortable: false
      }
      break;
    default:
      break;

  }

  if (visible) {
    if (colObj != undefined)
      this.gridcolumnDefs.push(colObj);
  }
}

// 设置列网格 this.GridName.setColumnDefs(this.gridcolumnDefs)

请尝试检查。

【讨论】：