Question

我在表格的网格中为每一行添加了“编辑”按钮。表的数据来自具有以下 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");
   
        }
    }

Answer 1

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

Read this article

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

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

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

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

1 个答案: