Angular中如何在TypeScript的地图点击事件里启用HTML按钮

你的问题出在直接操作DOM不符合Angular的数据驱动理念，而且getElementsByClassName返回的是元素集合，不是单个按钮，调用setAttribute会报错。另外按钮的disabled状态是通过表达式!has(Permission.Admin_Pod_Location_Full_Control) || cleanData绑定的，要启用按钮，得修改这个表达式里的变量，而非直接修改DOM属性。

正确解决步骤： #

1. 分析绑定条件
   按钮禁用的逻辑是：没有管理员权限 或者 cleanData为true。要启用按钮，需要让这个表达式结果为false。

2. 修改组件变量控制状态
   放弃DOM操作，直接在地图点击事件里修改cleanData（假设这是组件内的布尔变量）：

MapClick(event) {
  // 将cleanData设为false，解除禁用条件之一
  this.cleanData = false;
  // 可打印权限判断结果确认是否满足权限要求
  // console.log(this.has(Permission.Admin_Pod_Location_Full_Control));
}

3. 如果需要临时绕过权限（不推荐）
   要是想通过地图点击临时忽略权限限制，可以新增一个组件变量，修改HTML的绑定逻辑：

<div *ngIf="editVisible" class="p-col-1">
  <button label="Update" icon="far fa-save" class="p-button-raised p-button-primary" pButton
    [disabled]="(!has(Permission.Admin_Pod_Location_Full_Control) && !mapClickTriggered) || cleanData"
    (click)="updateLocation()"></button>
</div>

然后在TypeScript中：

// 组件内声明变量
mapClickTriggered = false;

MapClick(event) {
  this.mapClickTriggered = true;
  this.cleanData = false;
}

记住：Angular是数据驱动视图，所有UI状态都应该通过组件变量控制，直接操作DOM会破坏组件的可维护性，也容易出现状态不一致的问题。

内容的提问来源于stack exchange，提问作者user1263981