指向新屏幕的单元格中的 Ag-grid 按钮答案

【问题标题】：Ag-grid button in cell that directs to new screen指向新屏幕的单元格中的 Ag-grid 按钮
【发布时间】：2021-05-12 13:23:39
【问题描述】：

我在表格的网格中为每一行添加了“编辑”按钮。该表的数据来自带有以下 JSON 响应的 api。

{ 
 Id: 1783
 total: 2
 trasfer: true
 Sizing: true
 name: "runner"
}

我正在尝试实现当用户单击编辑按钮时会出现一个新屏幕，可以在其中编辑该行的值。到目前为止，我已经实现了一个按钮呈现组件，并在单击按钮时发出警报。如何将路由器与该特定行的可编辑数据一起实现到新屏幕。

演示：https://ag-grid2.zoltanhalasz.net/

button-renderer.component.ts

@Component({
  selector: 'app-button-renderer',
  template: `
    <button type="button" (click)="onClick($event)">{{label}}</button>
    `
})
export class ButtonRendererComponent implements ICellRendererAngularComp { 
    afterGuiAttached?(params?: import("ag-grid-community").IAfterGuiAttachedParams): void {
        return;
    }  
    ngAfterViewInit(): void {
        return;
    }
  public params;
  label: string;

  constructor(){}
  
  agInit(params: ICellRendererParams): void {
    this.params = params;
    this.label = this.params.label || null;
}
  refresh(params: any): boolean {
    return false;
}

public onClick(event) {
    this.params.data[this.params.colDef.field] = event.checked;

    if (typeof this.params.context.componentParent.notifyCellUpdate === "function"){
        this.params.context.componentParent.CellUpdate(this.params);
    }
    
 }
}

app.component.ts

       columnDef = [   {
            headerName: 'Button',     field : 'changeSettings',     
            cellRenderer: 'buttonRenderer',
            cellStyle: {'text-align': 'center'},
            cellRendererParams: {
              label: 'Open'
            }
          } ]

 CellUpdate(params){
      
        if (params.colDef.field === "changeSettings"){
            alert("Notified Button Clicked");
   
        }
    }

【问题讨论】：

您附加的链接会在整页刷新中完成。您的等价物是创建一个接受发票编号（id？）作为参数的路由，然后呈现编辑组件，该组件在初始化时获取发票详细信息。现在，由于您只有很少的字段要编辑，我建议避免路由并使用模式对话框来呈现编辑发票组件，这样，您可以使用表中列出的数据，而无需像您一样创建复杂的缓存机制使用单独路线时需要

标签： javascript angular ag-grid

【解决方案1】：

创建一个组件并使用输入数据导航到它。在组件之间转换数据的方法有很多。

Read this article

在您的示例演示中，您应该使用 id 定义路由并导航到它的组件，然后调用 api 来获取数据。

您也可以打开一个模式来显示数据。示例：

 CellUpdate(params){
      
        if (params.colDef.field === "changeSettings"){
          const modalRef = this.modalService.open(YourEditComponent);
          modalRef.componentInstance.data= params;   
        }
    }

【讨论】：