如何在单击时启用/禁用表格列文本

Question

我有一个正在运行的 Angular 9 应用程序，我正在使用自定义表格来显示数据。 单击列数据时，它会打开一个自定义模式对话框。 可以一次打开多个对话框模式。

每当打开任何模式时，我都会创建唯一 id 并将其传递给服务以在 map 中添加该 id 以保留打开对话框的引用。 此外，当用户想要关闭特定打开的对话框模式时，我传递了相同的 id。

对话服务.ts

private map = new Map<string, ComponentRef<CustomDialogComponent>>();

open(component: Type<any>, id) {    
        this.map.set(`modal-${id}`, dialogComponentRef);
    }

close(refId: string) {
        if (this.map.has(refId)) {
            const componentRef = this.map.get(refId);
            this.appRef.detachView(componentRef.hostView);
            componentRef.instance.close();
            this.map.delete(refId);
        }
    }

图表组件.ts

closeModal() {
        this.dialogService.close(this.id);
    }

我想实现一个要求，一旦单击打开模式对话框，我需要禁用列数据文本（例如： https://url.com ），并在模式关闭后启用列数据文本。 请帮助我。

Answer 1

添加 css class，并使用[class.disabled]=".mymap.get('myid')"在禁用和启用锚标记之间切换。 需要对 HTML 进行一些更改以满足您的需求。

<a href="#" id="myid" [class.disabled]="!mymap.get('myid')">hahahaha</a>

CSS

a.disabled {
  pointer-events: none;
  cursor: not-allowed; 
  text-decoration: none;
  color: black; /* Set to your desired text color */
}