Angular:在 agGrid 中的动态列上设置默认排序的最佳方法

2024-04-29

我正在开发 agGrid,我们没有明确定义列。我一生都无法弄清楚如何在我的一列上设置默认排序。在初始化时我们这样做:

public ngOnInit(): void {
    this.gridOptions.defaultColDef = this.selectable ? this.getDefaultColumnsDefinition() : null;
    this.showSpinner = true;
    this.getAllRefreshJobs();
}

这是其中的一列getDefaultColumnsDefinition()我想首先进行排序。我试过

public onGridReady(params): void {
    this.gridApi = params.api;
    const sortModel = [
        {colId: 'recordStartTime', sort: 'desc'}
    ];
    this.gridApi.setSortModel(sortModel);
    this.gridApi.sizeColumnsToFit();
}

但它不起作用。网格看起来是一样的。有人可以帮忙吗?


感谢@Jon Black 让我开始!

当我得知后setSortModel已弃用,这对我有用:

function sortGrid(event, field, sortDir) {
  const columnState = { // https://www.ag-grid.com/javascript-grid-column-state/#column-state-interface
    state: [
      {
        colId: field,
        sort: sortDir
      }
    ]
  }
  event.columnApi.applyColumnState(columnState);
}

with

this.gridOptions = {
      defaultColDef: {
        sortable: true // enable sorting on all columns by default https://www.ag-grid.com/javascript-grid-sorting/
      },
      columnDefs,
      onGridReady: function (event) {
        console.log('The grid is now ready', event);
        sortGrid(event, 'timestamp', 'asc')
      },
    }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular:在 agGrid 中的动态列上设置默认排序的最佳方法 的相关文章

  • 401 Unauthorized("detail":"未提供身份验证凭据。")

    我在后端使用 djoser 的身份验证 当我通过具有内容类型和授权标头的邮递员在 account me 发出获取请求时 我得到了正确的响应 但是当我尝试从我的角度客户端执行相同的请求时 我得到401 Unauthorized detail
  • Angular service-worker范围在安装过程中遇到错误

    我正在尝试使用 Angular Service Worker 但在尝试使用它时出现错误 这些是我的版本 Angular CLI 15 2 0 Node 16 18 1 Package Manager npm 8 19 2 OS linux
  • Webpack 在 Angular 的 ng 服务中的作用

    我是 Angular 的新手 想知道当我们为应用程序提供服务时 Webpack 在幕后扮演什么角色 在最初的印象中 我开始知道 webpack 是一个构建和打包工具 它将所有必需的 JS 文件分组到单独的包中 然而 我无法找到 webpac
  • Angular 6 Asp.Net(非 Core)Web Api CORS 请求失败

    我正在构建一个 Net Web Api 它将由 Angular 6 客户端使用 但出于某种原因 我无法使其在我的开发环境中工作 我从一个非常简单的 Web Api 开始 它只返回一个字符串 用于前端和后端测试目的之间的通信 GET api
  • TypeScript 0.9.5:如何定义具有静态成员的接口和实现它的类?

    这用于在 TypeScript 0 9 1 1 中编译 省略方法实现 module MyNodule export interface ILocalStorage SupportsLocalStorage boolean SaveData
  • 如何在 Angular2 中为表单分配和验证数组

    我的模型 this profile 在 javascript 中有一个属性叫做emails 这是一个数组 email isDefault status 然后我将其定义如下 this profileForm this formBuilder
  • 获取“回调 URL 与 Auth0 不匹配”

    我有一个 Auth0 客户端 配置了以下回调 URL http 本地主机 4200 http localhost 4200 我可以正常登录 问题是当我导航到应用程序中的某个 URL 时 http localhost 4200 places
  • http.put 请求在 Angular2 中执行两次

    我正在尝试更新从我的 Angular2 应用程序调用 API 的公司记录 我在调试时注意到 http 调用被执行了两次 我找到了另一个堆栈溢出线程 https stackoverflow com questions 37241294 ang
  • 类型“HTMLElement”上不存在属性“connectedCallback”

    我有一个项目 一年后我又回来了 类似于下面的代码的东西曾经有效 但现在不再有效 interface HTMLElement attributeChangedCallback attributeName string oldValue str
  • 不同事件的角度停止传播

    在我的 Angular 4 应用程序中 我有一个带有 dblclick 处理程序的父组件和一个带有 click 处理程序的子组件 组件 html
  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 类型“never”上不存在属性“click”。 TS2339

    根据有关 TypeScript 此类错误的其他类似问题 关于问题 44147937 https stackoverflow com questions 44147937 property does not exist on type nev
  • ngrx 存储是否持久?

    ngrx 存储是否持久 换句话说 我们可以关闭浏览器重新打开它 并检索添加到ngrx 商店 https github com ngrx platform 目前 ngrx store 不支持此类功能 但是您可以通过使用类似的库来维护状态ngr
  • Angular *ngFor 循环遍历数组的数组

    我有一个数组 其中包含其他数组 如下所示 array element A element B YES NO 我想使用 ngFor 循环遍历 HTML 表中的这个对象数组 table thead tr th th th COLUMN 1 th
  • 如何在 Angular 2 应用程序中从 TypeScript/JavaScript 中的字符串获取类?

    在我的应用程序中 我有这样的内容 user ts export class User 现在 我这样做 应用程序组件 ts callAnotherFunction User 如果我将类名作为字符串 即 我该如何做到这一点 User 如果可能的
  • 如何在 TypeScript 中禁用/抑制库中的错误?

    我打开了一些编译器开关来报告代码中的更多问题 例如严格的空检查 但我在使用的库中遇到了数十个错误 例如 default xxx node modules angular core src util decorators d ts 11 5
  • 为什么 Angular 2 项目如此大 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我们正在用 ng2 重写 ng1 项目 我们的 ng1 项目构建后大约有 8mb 我们对 ng2 的重写已经完成了大约四分之一 并且我
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 如何解决此错误“不要使用对象作为类型”?

    我不明白这个错误消息造成的 我的组件有两个和一个包含对象的数据数组 我收到一条错误消息 不要使用object作为一种类型 这object类型目前很难使用 我该如何解决它 我附加了数组包含对象的数据 first tsx import data
  • 角度 4 单击按钮功能未触发

    我正在尝试检查文本输入是否为空或不在角度 4 中 我没有为此使用表单 这只是一个输入字段 当我在下面的按钮中执行 addLocaton 函数时 需要进行检查 我的输入字段

随机推荐