Angular 5 [对象 HTMLDivElement]

Question

当我单击按钮时，我将“copyRow”元素发送到“copyItem”方法。我正在使用“Typescript”文件中的“item”变量来均衡“copyItem”元素。

当我想显示“[object htmldivelement]”作为输出时，这个“html 文件中的项目”变量。

create.component.html

<div class="questions">
    <div class="form-group copy-row" #copyRow>
       <label>Question</label>
       <input type="text" class="form-control" placeholder="Question title">
    </div>
    {{ item }}
</div>
<button type="button" class="btn btn-primary" (click)="copyItem(copyRow)">Add</button>

create.component.ts

  item;

  constructor() { }

  ngOnInit() {
  }

  copyItem(row) {
    this.item = row;
  }

编辑

我的目标是做一个调查项目。 当我单击“添加”按钮时，相同的“#copyRow”元素将显示在 {{ item }} 部分。但是，我得到了类似于第二个链接的输出。

1：http://prntscr.com/j1ncp1 2：http://prntscr.com/j1nd19

Answer 1

我不确定你想用这个实现什么，但这是对你的代码中发生的事情的解释。

#copyRow 是对 HTML 元素的引用，在这种情况下它是一个 div 元素。因此，当您使用 copyItem 函数传递引用时，实际上是在传递一个 HTML 元素。

将这些东西放在一起，copyItem 方法得到以下签名 -

public item: HTMLElement;

public copyItem(row: HTMLElement): void {
    this.item = row;
    //this is how you get inner HTML
    console.log(row.innerHTML);
    //this is to get inner text
    console.log(row.innerText);
}

这就是您在 item 绑定的模板中获得 [object HTMLDivElement] 的原因（您正在尝试显示一个对象）。

您可以简单地使用{{item.innerHTML}} 或{{item.innerText}} 来显示所选HTML 元素的内部内容。

如果我遗漏了什么，请告诉我。

编辑 - 替代方式（在模板中绑定）

如果你没有在组件中做额外的事情，绑定可以像将 HTML 元素引用直接分配给模板本身中的 item 属性一样简单 -

<div class="questions">
    <div class="form-group copy-row" #copyRow>
    <label>Question</label>
    <input type="text" class="form-control" placeholder="Question title">
    </div>
    {{ item?.innerHtml }}
    {{ item?.innerText }}
</div>
<button type="button" class="btn btn-primary" (click)="item = copyRow">Add</button>

编辑 2（根据 cmets 中的讨论）

尝试使用此模板在按钮单击时迭代相同的 HTML -

<div class="questions">
<ng-container *ngFor="let item of items">
    <div class="form-group copy-row">
        <label>Question</label>
        <input type="text" class="form-control" placeholder="Question title" />
    </div>
</ng-container>
<button type="button" class="btn btn-primary" (click)="items = items || []; items.push(1);">Add</button>

只需将您的 items 数组初始化为 -

public items: Array<number> = [1];

我希望这会有所帮助:)

Answer 2

使用 ViewChild 和 ElementRef

import { Component, ViewChild, ElementRef } from '@angular/core'



@ViewChild('item')
 item: ElementRef;

  constructor() { }

  ngOnInit() {
  }

  copyItem() {
    // this.item -> now you have the reference of the element
  }