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

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

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

dialog.service.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);
        }
    }

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

我想实现这样一个要求：一旦点击打开模式对话框，我需要禁用列数据文本（例如：），一旦关闭模式，我需要启用列数据文本。

---

请在这方面帮助我。

添加css类，并使用

[class.disabled]=“！mymap.get（'myid'）”

在禁用和启用锚定标记之间切换。需要对HTML进行一些更改以满足您的需要

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

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