Angular2如何获得生成的HTML元素的参考动态

我有动态生成的这个输入：Angular2如何获得生成的HTML元素的参考动态

<div *ngFor="let cell of column; let i = index;"> 
      <!-- Material design input--> 
      <md-input id="my-input-{{i}}"> 
      </md-input> 
    </div>

请注意id=my-input-{{i}}我想获得到在此基础上动态ID的DOM元素的引用。这个输入可以是3个，6个或更多的输入，所以我需要动态地访问这个id并获得它。

来源

2016-11-10 commonSenseCode

没有其他的角度怪异仪式什么是你想实现什么？ – yurzui

@yurzui我需要在按下按钮时获得所有输入的值，问题在于它们可以在数量和内容上有所不同，例如它们可以是3输入或6输入或4或5 ...所以我需要一些生成动态ID并动态获取其内容的方法 – commonSenseCode

如果您可以访问DOM，是否足够？ – quindimildev

唯一的反应是

let elem:Element = document.getElementById("myProgrammaticallyChosenIndex")

需要

测试在角4+

来源

2017-10-01 20:00:45

您可以通过elementRef访问DOM。

注入它由

constructor(myElement: ElementRef) { ... }

而且由nativeElement财产

elementRef.nativeElement.select("#blabla")

来源

2016-11-10 19:51:38 quindimildev

'elementRef.nativeElement'没有'select'方法。 –

呃，为什么不''elementRef.nativeElement.querySelector（）'？见https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector –

@vicgoyso寒气出来，并提供为什么你觉得这是不是一个很好的回答一个反例或解释。 querySelector响应就是很好的例子。 – dudewad

访问DOM元素会让你的构造函数有一个叫ElementRef class

类它给你的许可证直接访问到托管DOM的当前组件或指令。

您可以使用ElementRef.nativeElement得到一个HTML元素，那么你就可以访问HTML元素的属性通过使用角2

例与ElementRef和Renderer提供jQuery或Renderer类，使您的修改：

从 @angular/core

import { Directive, ElementRef, Input, Renderer } from '@angular/core'; 
@Directive({ selector: '[myHighlight]' }) 
export class HighlightDirective { 
    constructor(el: ElementRef, renderer: Renderer) { 
     renderer.setElementStyle(el.nativeElement, 'backgroundColor', 'yellow'); 
    } 
}

来源

2016-11-10 21:36:02

使用ElementRef类来获取父元素，然后创建一个HTMLElement，以获取其动态元素中，b y类名。

组件：

declare var $: any; //intentional use of jQuery-not recommended though 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <input type='button' (click)='addDiv()' value='Add New Div' /> 

    <input type='button' (click)='selectDiv()' value='Select' /> 
    ` 
}) 
export class App { 
    constructor(private elRef: ElementRef) { 
    } 

    addDiv() { 
    /*intentional use of jQuery for appending new div 
    give a class to your dynamic elements*/ 

    $('my-app').append("<div class='foo'>Hello I'm Dynamic!</div>"); 
    } 

    selectDiv() { 
    //create a new HTMLElement from nativeElement 
    var hElement: HTMLElement = this.elRef.nativeElement; 

    //now you can simply get your elements with their class name 
    var allDivs = hElement.getElementsByClassName('foo'); 

    //do something with selected elements 
    console.log(allDivs); 
    } 
}

Working Plunker

编辑：我只用jQuery快速演示目的在这里。否则，你不应该使用jQuery与Angular。

来源

2016-12-23 18:32:58

@Downvoter：照顾解释？ –

除了这个问题从未提及过使用jQuery的事实之外，你不应该为你不推荐做的事情包含代码演示。 – wrldbt

@wrldbt：“*'quick demo' *” –

Angular2如何获得生成的HTML元素的参考动态

回答

相关问题