Angular 5中HTML元素赋值后显示[object HTMLDivElement]问题咨询

嘿，我明白你遇到的问题了——当你把模板引用的DOM元素传给方法并赋值给变量后，直接在模板里插值展示就会输出[object HTMLDivElement]。这其实是JavaScript的正常行为：当你尝试把一个DOM对象转换成字符串时，它就会返回这个默认的对象标识，而不是你想要的元素内容或者结构。

下面给你几个针对性的解决方案，根据你的实际需求来选：

1. 获取元素的HTML内容展示 #

如果你想要展示这个<div>里的HTML结构，只需要在TypeScript里获取元素的innerHTML属性即可：

修改TypeScript代码： #

// 把item的类型改成string，存储HTML内容
item: string;

copyItem(element: HTMLElement) {
  // 获取目标元素的HTML内容
  this.item = element.innerHTML;
}

模板里直接展示： #

<!-- 现在会显示div内的完整HTML结构 -->
<div>{{ item }}</div>

⚠️ 注意：如果这个HTML内容包含用户输入的内容，Angular会自动进行安全校验，可能会过滤掉不安全的标签。如果需要允许特定的HTML，可以使用DomSanitizer来处理。

2. 更Angular化的方式：复用模板（推荐） #

直接操作DOM并不是Angular的最佳实践，我们可以用模板复用的方式来实现"复制"元素的效果，完全不需要直接传递DOM元素：

修改模板代码： #

<!-- 定义可复用的模板 -->
<ng-template #copyTemplate>
  <div class="form-group copy-row">
    <label>Question</label>
    <input type="text" class="form-control" placeholder="Question title">
  </div>
</ng-template>

<!-- 原始的问题区域 -->
<div class="questions">
  <ng-container *ngTemplateOutlet="copyTemplate"></ng-container>
</div>

<!-- 触发复制的按钮 -->
<button (click)="addCopiedItem()">复制行</button>

<!-- 展示复制出来的内容 -->
<div class="copied-content">
  <ng-container *ngFor="let _ of copiedItems">
    <ng-container *ngTemplateOutlet="copyTemplate"></ng-container>
  </ng-container>
</div>

修改TypeScript代码： #

// 用数组来控制复制的数量，数组长度就是复制的行数
copiedItems: number[] = [];

addCopiedItem() {
  // 每次点击就往数组里加一个元素，触发模板渲染
  this.copiedItems.push(1);
}

这种方式完全遵循Angular的数据驱动理念，避免了直接操作DOM带来的维护问题，而且扩展性更好——比如后续要给复制的行加删除功能，只需要操作数组即可。

3. 获取元素的纯文本内容 #

如果你只需要展示元素里的文本内容，可以用textContent属性：

TypeScript代码： #

item: string;

copyItem(element: HTMLElement) {
  this.item = element.textContent.trim();
}

模板展示： #

<div>{{ item }}</div>

这样就会输出<div>里的所有文本内容（比如"Question"和输入框的占位符文本）。

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