角度的ag-grid中的单元格渲染问题

Posted 2023-03-28

【中文标题】角度的ag-grid中的单元格渲染问题

【英文标题】：issue with cell render in ag-grid in angular

【发布时间】：2021-01-27 20:55:25

【问题描述】：

我在角度使用 ag-grid，我想在单击特定单元格时重定向到链接。

所以这里我有一个来自 api 的新值，它位于对象下的数组中。 那是 我在第一列中显示的对象 dto-> dataitems[shortName] 但是当用户单击它时，我想将其重定向到路由器链接。

我尝试了下面的代码，但它不起作用。

component.ts 文件：

 headerName: 'Deal Name',
          autoHeight: true,
          colId: 'shortName',
          field: 'shortName',
          exportColumn: true,
          width: 275,
          cellRendererFramework: function(params) 
            return '<a href="javascript:void(0)"'+
             '[routerLink]="[/valuation,'+
              'deal: test,'+
              'b: 2020Q3,'+
              'c: someval,'+
              'd: 9'+
               ']"' +
             'target="_blank" rel = "noopener">'+params.value+'</a>'
          ,

当我使用上面的代码时，我看到了值，但是当我点击链接时它不起作用。

我还使用 ng-template 尝试了以下代码，但如果我添加我的列，它只会显示空白值

html：

<ng-template #dealNameCell let-row>
      <a
        *ngIf="row.canView"
        href="javascript:void(0)"
        [routerLink]="[
          '/valuation',
          
          deal: row.someval,
          b: row.someval,
          c: row.someval,
          d: row.someval
         
        ]"
        queryParamsHandling="merge"
      >
         row.shortName 
      </a>

      <a
        data-toggle="modal"
        data-target="#changeQuarterModal"
        *ngIf="!row.canView"
        href="javascript:void(0)"
        queryParamsHandling="merge"
      >
         row.shortName 
      </a>
    </ng-template>

当我使用上面的代码时，我看不到列为空。没有显示任何价值。 在这里，如果我放置了一些位于对象根级别的列，那么它就可以工作。但是我的数据位于对象内的数组下，我无法检索该数据

【参考方案1】：

因此，单元格渲染器绝对可以用于导航，就像任何其他组件一样。我们项目首选的方法是在组件中定义链接的基础，例如link = '/accounts/users/'，然后通过

访问必要的数据

link = '/accounts/users/'
linkText = params.value.linkText; 


agInit(params: any): void 
   this.link += params.value;
// or if you have an array of link params:
// for(const linkSegment of params.value.linkValues) 
//  this.link += linkSegment + '/';
// 

然后，在模板中，简单地说：

<a class="my-link" [routerLink]="link">params.linkText</a>

您也可以使用其他形式的链接，在组件中使用 router.navigate，但这取决于您。

希望对您有所帮助，祝您编码愉快！

【讨论】：

所以我需要在来自 ag 网格单元的链接上调用它。同样在路由器链接中，我有查询参数，那么我该如何以更好的方式做到这一点？

基本上，单元格可以从 agInit 的 params.value 对象访问所有变量。从那里你可以使用它们来做你需要做的任何事情，关于角度路由，模板将显示在网格中。将单元格渲染器视为“提供一个组件来代替网格单元格”。