如何在Angular 4中删除当前点击的HTML div标签并替换为文本框

没问题，我来帮你调整代码实现这个需求。这里有两种常见的做法，一种是符合Angular最佳实践的数据绑定方式，另一种是直接操作DOM的方式，你可以根据场景选择：

推荐方案：Angular数据绑定（不直接操作DOM） #

这种方式利用Angular的*ngIf指令来切换显示Div还是文本框，更符合框架的响应式理念，也更容易维护：

组件类代码 #

import { Component } from '@angular/core';

@Component({
  // 填写你的组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  // 标记是否已替换为文本框
  isReplaced = false;
  // 文本框的初始值，对应原Div的文本内容
  inputContent = 'Rate Limit';

  replaceDivWithInput() {
    this.isReplaced = true;
  }
}

模板代码 #

<!-- 未替换时显示原Div，点击触发替换逻辑 -->
<div *ngIf="!isReplaced" class="col" (click)="replaceDivWithInput()">Rate Limit</div>
<!-- 替换后显示文本框，绑定初始值 -->
<input *ngIf="isReplaced" type="text" [(ngModel)]="inputContent" class="col" />

备选方案：直接操作DOM（不推荐用于Angular项目） #

如果因为特定场景需要直接操作DOM元素，可以修改原有的removeObject方法来实现替换逻辑：

组件类代码 #

removeObject(event: Event) {
  const targetDiv = event.target as HTMLElement;
  // 创建文本框元素
  const inputElement = document.createElement('input');
  
  // 设置文本框的属性与样式
  inputElement.type = 'text';
  inputElement.value = targetDiv.textContent?.trim() || '';
  inputElement.className = 'col'; // 保留原Div的样式类

  // 用文本框替换掉原来的Div
  targetDiv.parentNode?.replaceChild(inputElement, targetDiv);
}

模板代码 #

<div class="col" (click)="removeObject($event)">Rate Limit</div>

注意：在Angular项目中，尽量避免直接操作DOM，这会绕过Angular的变更检测机制，可能导致视图与数据不同步，也不利于后续的维护和测试。

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