标签: ag-grid-angular

我正在使用无限的 rowModelType 并且每次用户更改过滤器时都会清除和加载新数据。

我的数据中有一个字段，它是一个名为 status 的复杂对象，具有 id 和 name 属性。我正在尝试为 set 过滤器加载异步属性，但得到了一些奇怪的结果。这是我的感冒：

{
    headerName: 'Status',
    field: 'status',
    cellRenderer: (params) => params.value.name,
    keyCreator: (params) => params.value.id,
    filter: 'agSetColumnFilter',
    filterParams: {
        newRowsAction: 'keep',
        values: (params) => this.statusApiService.getList().pipe(map(response => response.data)).subscribe(data => params.success(data)),
        cellRenderer: (params) => params.value.name
    }
}

设置的过滤器显示正确，列也是如此，例如状态名称同时显示，但是当我单击以取消选择过滤器中的项目之一时，它会取消选择所有项目。

我理解设置过滤器吗？我可以使用它并做我的过滤服务器端吗？我不想做任何客户端比较器等。

我需要在 ag-grid 中将选择颜色从蓝色（默认颜色）更改为红色边框蓝色。

请参阅图片蓝色应转换为带有红色边框的深蓝色

当前的 Angular ag-grid 工具提示示例不起作用。

https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko

JavaScript/打字稿。运行 Angular 8 和最新的 ag-grid 版本。我曾尝试效仿 plunker 的例子，但没有成功。我现在正在尝试这个。我有一个名为 CustomTooltipComponent 的组件，该组件在模板中具有动态 mat-tooltip，该模板从我的 .ts 文件中获取 {{data}} 。工具提示没有显示，所以我输入了一个跨度并且它显示了，但它以纯文本显示。创建的组件也已添加到我的入口和声明模块中。

<<<----   component that wants the tooltip --->

this.gridOptions = {
      deltaRowDataMode: true,
      getRowNodeId: (data) => data.name,
      onRowDoubleClicked: (data) => this.selectRow(data),
      rowSelection: 'single',
      defaultColDef: {
        sortable: true,
        resizable: true,
        tooltipComponentFramework: CustomTooltipComponent,
        tooltipValueGetter: (params: ITooltipParams) => params.data,
      }
    };```

      this.columnDefs = [
        {
          headerName: 'Name',
          field: 'name',
          sort: 'asc',
         // tooltipField: 'name'
        }



<<<-------- tooltip component .ts ------->>>

import { Component } …

我正在尝试在我的 Web 应用程序中使用 Angular Ag-Grid。

我已经按照这些教程

1. 角网格 | 开始使用 ag-Grid

2. ag-Grid 角度组件

问题/问题 我完全遵循了每一件事。甚至数据正在加载到网格中，但视图并不是很明显。这是我得到的（不是对齐，没有着色）

我尝试过的内容是通过 Google 和 Stack Overflow 进行广泛搜索。一些答案建议CSS没有正确加载（这是一个可靠的论点），但我仔细检查了我的导入语句，Component.css并尝试.css在index.html. .css我参考的文件存在并且参考也很好。

我的期望

代码

应用组件.html

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
  [columnDefs]="columnDefs">
</ag-grid-angular>

应用组件.ts

import { Component } from '@angular/core';
import { Grid } from 'ag-grid/main';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {

  title = 'Grid1';
  columnDefs = [
    { headerName: "Make", field: "make" …

使用角度和服务器端数据源，我希望能够在特定页码加载网格。这将帮助我支持用户从列表页面（聚合）转到详细信息页面时使用后退按钮。

我发现了 paginationGoToPage() 但它似乎在 onGridReady 中不起作用，只有当我在单击按钮时使用它时它才起作用。但即使我确实使用它，似乎数据也必须加载两次，一次是在第一次渲染网格时，然后是在我想要访问的特定页面时再次加载。

需要创建 ag-grid，其中列标题旋转 45 度角。该列的宽度应足以容纳复选标记。

我尝试使用此处提供的示例：https ://www.ag-grid.com/javascript-grid-column-header/#textOrientation

该插件不适用于 Angular，并且示例代码无法加载。

示例中提供的 CSS 不显示整个标题。标题高度限制为 25 像素。表头呈45度角，但只能看到几个字母。我还尝试使用 setHeaderHeight() 和 headerHeight，但都没有提供任何积极的结果。

我想要的与这里看到的类似： https: //css-tricks.com/rotated-table-column-headers/

目前使用：Angular 7 ag-grid-angular 21.2.2 ag-grid-community 21.2.2

我正在查看文档ag-grid，看起来没有事件可以捕获网格的行悬停事件。我的要求是当用户将鼠标悬停在该行上时在第一列上显示图像。它可能位于该行的任何列，不一定位于第一个单元格。我正在使用单元格渲染器和单元格编辑器并执行某些操作。（为简单起见，我没有在 plunker 链接中发布单元格编辑器代码）我怎样才能实现这一目标？

请参阅 plunkr 示例：https://plnkr.co/edit/NfuGp3iVheuCqglz

app.component.ts：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import {KaboobMenuComponent} from './kaboob-menu.component';
    
@Component({
  selector: 'my-app',
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-alpine"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
       [frameworkComponents]="frameworkComponents"
    ></ag-grid-angular>
  `,
})

export class AppComponent {
  private gridApi;
  private gridColumnApi;
    
  private columnDefs;
  private defaultColDef;
  private rowData: [];
  public frameworkComponents;
    
  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: 'Participant',
        children: …

我在 ag-grid 中有一个复选框，我按以下方式显示：

  {header: 'Cancel', 
    field: 'IsCancel', 
    cellRenderer: params => {
      return `<input type='checkbox' ${params.value ? 'checked': ''} />`
    }  
  }

我想要实现的是，当用户单击“保存”按钮时，我会浏览每一行并找出已选中哪个复选框。

我尝试使用下面的代码来找出已选中哪个复选框。不幸的是，即使我选中 ag-grid 中的复选框，node.data.IsCancel 也是 false：

  saveCustomer() {
    this.api.forEachNode(this.printNode)
  }

  printNode(node, index) {
    console.log('Customer Number is: ' + node.data.CustomerNumber);
    console.log('Cancel is: ' + node.data.IsCancel);
    if (node.data.IsCancel.checked) {
      console.log('Customer Number in checked is: ' + node.data.CustomerNumber);
    }
  }

这是所有代码：

取消.component.html

<div *ngIf="loadCancellation">
  <ag-grid-angular class="ag-fresh"
    [columnDefs]="columnDefs"
    [rowData]="customerNames"
    (gridReady)="onGridReady($event)"
    class="ag-theme-balham">
  </ag-grid-angular>
  <br/>
  <button mat-raised-button color="primary" (click)="saveCustomer()">Save</button>
</div>

取消.component.ts

import { Component, Input, …

我的桌子使用的是 ag-grid。我需要在表格末尾显示每列的总和。编辑单元格后，应更新总和值

下面是我的html：

<div>
  <ag-grid-angular style="width: 100%; height: 500px;" class="ag-theme-alpine" [rowData]= "rowData"
    [columnDefs]= "columnDefs" >
  </ag-grid-angular>
</div>

以下是打字稿

import { Component } from '@angular/core';
import { GridRes } from './gridres.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ag-custom';


  columnDefs = [
    {headerName: "Make", field: "make"},
    {headerName: "Model", field: "model"},
    {headerName: "Price", field: "price"}
];

rowData = [
  {make: "Toyota", model: "Celica", price: 35000},
  {make: "Ford", model: "Mondeo", price: 32000},
  {make: "Porsche", model: "Boxter", …

Angular 中的 Ag-grid 使用 showLoadingOverlay() 函数在网格上显示加载栏。我如何知道我的角度农业网格已完成加载？