Question

当我点击按钮时，我发送了'copyRow＆＃39;元素到＆＃39; copyItem＆＃39;方法。我正在平衡＆＃39; copyItem＆＃39;元素与＆＃39;项目＆＃39; ＆＃39; Typescript＆＃39;中的变量文件。

html文件中的这个＆＃39;项目＆＃39;变量，当我想显示＆＃39; [object htmldivelement]＆＃39;我得到了输出。

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;
  }

修改

我的目标是做一个调查项目。当我点击“添加＆＃39;按钮，相同的＃copyRow＆＃39;元素将显示在{{item}}部分中。但是，我得到的输出就像第二个链接一样。

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

Answer 1

使用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
  }

Answer 2

我不确定您想要实现的目标，但这是对代码中发生的事情的解释。

#copyRow是对HTML元素＆amp;的引用。在这种情况下，它是一个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);
}

这就是为什么你在[object HTMLDivElement]绑定的模板中获得item的原因（你试图显示一个对象）。

您只需使用{{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（根据评论中的讨论）

尝试使用此模板在按钮单击时迭代相同的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];

我希望这会有所帮助：）

Angular 5 [对象HTMLDivElement]

2 个答案: