单击时如何切换单元格图标

Question

我正在使用ag网格，其中我在单元格中有一个按钮。我想在单击按钮时更改按钮的图标以显示某种进度，然后在操作完成时将图标返回到其原始状态。

这是我的代码

my-custom.component.ts

<ColDef>{
headerName: 'Export',
width: 40,
height: 80,
cellRendererFramework: ButtonCellRendererComponent,
cellRendererParams: {
isLoading: false,
onClick: this.onExportButtonClicked.bind(this),
}
}
onExportButtonClicked(cell) {
this.customService.downloadData(cell.rowData)
.subscribe(data => {console.log("success")},
(error) => { console.log("there was an error") },
() => {
console.log("complete function triggered");
});
}

template: `<button class="unstyled-button" (click)="onClick($event)">
<span *ngIf="!isLoading">
<i class="fas fa-file-pdf"></i>
</span>
<span *ngIf="isLoading">
<i class="fas fa-spinner fa-spin"></i>
</span>
</button>`,
export class ButtonCellRendererComponent implements ICellRendererAngularComp {
public isLoading: boolean;
private params: any;
agInit(params: any): void {
this.params = params;
this.isLoading = this.params.isLoading;
}
refresh(params: any): boolean {
return false;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
const params = {
event: $event,
data: this.params.node.data,
isLoading: this.isLoading
}
this.params.onClick(params)
}
}

如何在此处切换isLoading变量？有没有办法为按钮点击添加回调函数？

Answer 1

您可以保留模板文件的结构，我认为这很好。

<button (click)="onClick()">
<span *ngIf="!isLoading">
ICON1
</span>
<span *ngIf="isLoading">
ICON2
</span>
</button>

在您的typescript中，我认为您可以简单地将isLoading初始化为false。在onClick触发的函数中，只需将此属性设置为true即可。然后，在任务完成后，调用异步函数并将属性设置为false。

public isLoading: boolean = false;
public onClick() {
this.isLoading = true;
this.service.taskAsync().subscribe(
(data) => {
this.isLoading = false;
console.log("success");
}, (error) => {
this.isLoading = false;
console.log("error");
}
);
}

为了不复制代码，您还可以使用pipe。

public isLoading: boolean = false;
public onClick() {
this.isLoading = true;
this.service.taskAsync().pipe(
finalize(() => {
this.isLoading = false;
})
).subscribe(
(data) => {
console.log("success");
}, (error) => {
console.log("error");
}
);
}