标签: ag-grid-angular

我需要在单击按钮时隐藏 VAD 组列。请帮我。

我面临的一个与 Ag-grid 相关的问题是，当我们选中标题中的复选框时，他们会选择所有总记录（分页中的所有页面），我只想选择当前页面数据，例如：我的页码有 10 条记录1 那么他们应该只选择网格中的 10 条记录。

我正在尝试通过 ag-grid 中的 cellRenderer 添加Font Awesome图标。

如何<fa-icon>在单元格渲染中正确渲染标签？

这是我尝试的：

    {
      width: 150,
      headerName: 'Events',
      // tslint:disable-next-line: object-literal-shorthand
      cellRenderer: (params: any) => {
        const PHD: boolean = params.data.PHD;
        const DG: boolean = params.data.DG;
        const HOT: boolean = params.data.HOT;
        let result = '';
        if (PHD) {
          result = result + '<fa-icon [icon]="faCoffee"></fa-icon>';
        }
        if (DG) {
          result = result + '';
        }
        if (HOT) {
          result = result + '';
        }
        return result;
      },
      resizable: true,
      filter: false,
    }, …

我正在尝试在 AG-GRID 表中使用值格式化程序来显示货币信息。

当我在格式化程序中有一个硬编码值（在本例中为“欧元”的 unicode）时，这非常有效

currencyFormatter(params) {
  return '\u20ac' + params.value;
}

但是，我事先不知道需要用什么货币来格式化数据，因为它是动态生成的。如果我尝试使用我的组件中可用的值（如下所示），它不喜欢它！

currencyFormatter(params) {
  return this.currencyUnicode + params.value;
}

它在控制台中抛出的是：

TypeError: Cannot read property 'defaultCurrency' of undefined

似乎所有“this”组件变量在currencyFormatter 中都不可用。有办法让这项工作发挥作用吗？

我有 agGrid，其中包含使用 refData 属性的列。它显示为“是”或“否”，但基础值为“1”或“0”。我想按数据过滤列，但按“是”或“否”过滤时没有给出任何结果。然而，当我输入基础数据（即 1 或 0）时，过滤器开始工作。

HTML 文件

<ag-grid-angular class="ag-theme-balham" 
            [rowData]="categoryRowData" [columnDefs]="categoryColDef" [domLayout]="domLayout"
            (gridReady)="onGridReady($event)">
       </ag-grid-angular>

TS文件

export class CategoryComponent implements OnInit{
    private domLayout;
    private objCategoryEditor = {};
    categoryColDef ;

    constructor()
    {
        this.getCategoryMapping();
        this.createCategoryColDefinition();
    }

    ngOnInit() {        
        this.domLayout = "autoHeight";
    }

    onGridReady(params: any) {            
        params.api.sizeColumnsToFit();
        params.api.resetRowHeights();                                     
    }

    createCategoryColDefinition() {
        this.categoryColDef = [            
        {
            headerName: 'Is Subcategory', field: 'IsSubcategoryText', resizable: true,filter:true,
            editable: function (params: any) {
                return true;
            },
            cellEditor: "agSelectCellEditor",
            cellEditorParams: {
                values: this.extractValues(this.objCategoryEditor),
            },
            refData: this.objCategoryEditor,            
        }
    ]}

    getCategoryMapping() …

我想在 ag-Grid（Angular 版本）的每一行添加编辑/保存和删除按钮。我正在使用社区版。

单击“编辑”按钮应使整行可编辑并显示“保存”按钮。删除按钮应删除该行。

在 stackoverlow 上看到很少的答案，但似乎它们不起作用。请帮忙！

我有两个 AG 网格显示数据。它们中的每一个在每一行的末尾都有两个图标，用于修改或取消数据行。它们都在垫子标签内。

<mat-tab-group>
    <mat-tab label="Adresses">
      <div class="col d-flex justify-content-end py-3"><button class="btn btn-major" *ngIf="modify" (click)="showCreateAdresseDialog()">CRÉER</button></div>
      <ag-grid-angular
        style="height: 600px"
        class="ag-theme-alpine"
        [rowData]="rowData"
        [gridOptions]="gridOptions"
        suppressCellSelection="true"
        [paginationAutoPageSize]="true"
        [pagination]="true"
        [frameworkComponents]="frameworkComponents"
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        [overlayNoRowsTemplate]="overlayNoRowsTemplate"
        (gridReady)="onGridReady($event)">
      </ag-grid-angular>
    </mat-tab>

    <mat-tab label="Rôles">
      <div class="col d-flex justify-content-end py-3"><button class="btn btn-major" (click)="showCreateRoleDialog()" *ngIf="modify">CRÉER</button></div>
      <ag-grid-angular
        style="height: 600px"
        class="ag-theme-alpine"
        [rowData]="rolesRowData"
        [columnDefs]="columns"
        [gridOptions]="rolesGridOptions"
        suppressCellSelection="true"
        [paginationAutoPageSize]="true"
        [pagination]="true"
        [frameworkComponents]="frameworkComponents"
        [overlayLoadingTemplate]="overlayLoadingTemplate"
        [overlayNoRowsTemplate]="overlayNoRolesRowsTemplate"
        (gridReady)="onRolesGridReady($event)">
      </ag-grid-angular>
    </mat-tab>
  </mat-tab-group>

下面，您可能会看到我如何在 AG 网格中添加组件。

frameworkComponents = {
    modifierButtonRenderer: ActeurModifierAdresseButtonRendererComponent,
    // Other components
};

  gridOptions = {
context: {
  parentComponent: this
},
defaultColDef: { …

我正在不同的第三方网格上进行研发，这些网格具有可用的主从功能。

我已按照 Ag-Grid 网站中的步骤来渲染具有可扩展的主从网格的 ag-grid。

但是当应用程序呈现时，我只看到一个空白组件。

控制台中也没有错误。

这是我的html

<div><p>ag-hierarchy-grid works!</p></div>
<div>
    <ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [masterDetail]="true"
    [detailCellRendererParams]="detailCellRendererParams"
    [rowData]="rowData"
    (firstDataRendered)="onFirstDataRendered($event)"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>

这是我的组件代码

<div><p>ag-hierarchy-grid works!</p></div>
<div>
    <ag-grid-angular
    style="width: 100%; height: 100%;"
    class="ag-theme-alpine"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [masterDetail]="true"
    [detailCellRendererParams]="detailCellRendererParams"
    [rowData]="rowData"
    (firstDataRendered)="onFirstDataRendered($event)"
    (gridReady)="onGridReady($event)"
  ></ag-grid-angular>
</div>

有人可以指出我可能缺少什么吗？

调整ag-Grid的大小（更改浏览器窗口的大小）并在两个选项卡之间切换时，收到以下警告：

ag-Grid：尝试调用sizeColumnsToFit（），但是网格返回的宽度为零，也许网格在屏幕上还不可见？

我在Stackblitz中重现了这种情况：

https://angular-jpmxjy.stackblitz.io/

这是测试应用程序的组成：

• PrimeNG p-tabMenu位于组件：header.component
• 组件上的ag-Grid：delleverancer.component和legancer.component。

调整网格大小并在tabMenu“ Leverancer”和“ Delleverancer”之间切换时，您会在chrome开发工具中看到警告错误。

您可以在此处查看代码：

https://stackblitz.com/edit/angular-jpmxjy

如何清除此不必要的警告错误？

ag-grid 社区 v20，Angular 7。

我ag-grid在我的Angular 7应用程序中有一个工作。我想在一列中显示图像。该https地址包含在列field。我搜索了 ag-grid 的文档和网络，但没有找到这个基本场景的例子。有人可以为columnDef. 是cellRenderer这样做的方法吗？

{ headerName: 'Select', field: 'Image', width: 75, sortable: false,
    cellRenderer: '<span><img border="0" width = "15" height="10" src=xxxx ></span>' },