reactivos - ngmodel angular 5

Angular2 Cómo obtener referencia de elementos HTML generados dinámicamente.

Question

Tengo estas entradas generadas dinámicamente:

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

Por favor note id=my-input-{{i}} Me gustaría obtener una referencia al elemento DOM basado en esta identificación dinámica. Esta entrada puede ser de 3, 6 o más entradas, por lo que necesito acceder a la ID dinámicamente y controlarla.

Answer 1

Hay una clase llamada clase ElementRef

Le da a su permiso acceso directo al componente o directiva actual que aloja DOM.

Puede usar ElementRef.nativeElement para obtener un elemento HTML, luego puede acceder a las propiedades del elemento html para realizar su modificación utilizando jQuery o la clase Renderer proporcionada por Angular 2.

Ejemplo con ElementRef y Renderer :

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

Answer 2

La única respuesta es

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

Ninguna otra ceremonia extraña angular necesaria

Probado en angular 4+

Answer 3

Podrías acceder al DOM por medio de elementRef.

Inyecte tirar su constructor por.

constructor(myElement: ElementRef) { ... }

Y acceso al elemento DOM por la propiedad nativeElement

elementRef.nativeElement.select("#blabla")

Answer 4

Use la clase ElementRef de @angular/core para obtener el elemento padre y luego cree un HTMLElement para obtener sus elementos dinámicos por nombre de clase.

Componente:

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

Trabajando plunker

Edición: usé jQuery solo para fines de demostración rápida aquí. De lo contrario, no debes usar jQuery con Angular .