gpt4 book ai didi

angular - 在 ag-grid 中实现一个按钮

转载 作者:搜寻专家 更新时间:2023-10-30 21:23:40 26 4
gpt4 key购买 nike

我正在努力学习 this example ag-grid,以便在网格的每一行中创建一个删除按钮。上述示例有效,但我的代码无效,我不明白为什么。

我附上了我的代码,希望有人能帮助我。

home.component.ts:

@Component({
selector: 'home',
providers: [
Title
],
styleUrls: [ './home.component.css' ],
templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
private items: Item[] = [];
private gridOptions:GridOptions;
private columnDefs = [];

constructor(
private itemsService: ItemsService
) {
this.gridOptions = {};
this.columnDefs = this.createColumnDefs();
}

remove() {
alert("yey!")
}

ngOnInit(){
this.itemsService
.getAll()
.subscribe(result => {
this.items = result;
});
}

private createColumnDefs() {
return [
{
headerName: "Foo",
field: "foo",
width: 100,
},
{
headerName: "Bar",
field: "bar",
width: 100,
},
{
headerName: "",
field: "_id",
cellRendererFramework: RemoveButton,
colId: "params",
width: 100
},
];
}
}

home.component.html:

<div>
<ag-grid-angular #agGrid style="width: 602px; height: 350px;" class="ag-fresh"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="items">
</ag-grid-angular>
</div>

删除按钮.ts:

@Component({
selector: 'remove-button',
template: `<span><button style="height: 20px" (click)="remove()">X</button></span>`
})
export class RemoveButton implements ICellRendererAngularComp {
public params: any;

agInit(params: any): void {
this.params = params;
}

public remove() {
this.params.context.componentParent.remove();
}
}

网格显示了所有数据,但单击按钮会产生此错误:

ERROR TypeError: Cannot read property 'componentParent' of undefined
at RemoveButton.webpackJsonpac__name_.453.RemoveButton.remove

意思是 paramscontext 未定义。

如果需要任何进一步的代码或信息,请告诉我。

最佳答案

我已经解决了我的问题。显然 context 是未定义的,因为我没有定义它。在 gridOptions 中定义上下文解决了这个问题:

this.gridOptions ={
context: {
componentParent: this
}
};

关于angular - 在 ag-grid 中实现一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44486288/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com