[英]Ag-grid button in cell that directs to new screen
我在表格的网格中为每一行添加了“编辑”按钮。 该表的数据来自 api 和以下 JSON 响应。
{
Id: 1783
total: 2
trasfer: true
Sizing: true
name: "runner"
}
我正在尝试实现当用户单击编辑按钮时会出现一个新屏幕,可以在其中编辑该行的值。 到目前为止,我已经实现了一个按钮呈现组件,并在单击按钮时发出警报。 如何将路由器与该特定行的可编辑数据一起实现到新屏幕。
演示: https://ag-grid2.zoltanhalasz.net/
按钮渲染器.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 定义路由并导航到它的组件,然后调用api
来获取数据。
您也可以打开一个模式来显示数据。 例子:
CellUpdate(params){
if (params.colDef.field === "changeSettings"){
const modalRef = this.modalService.open(YourEditComponent);
modalRef.componentInstance.data= params;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.