Angular2 Comment obtenir la référence des éléments HTML générés dynamiquement

J'ai cette entrées générées dynamiquement:

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

Veuillez noter id=my-input-{{i}} je voudrais obtenir une référence à l'élément DOM basé sur cette dynamique id. Cette entrée peut être de 3, 6 entrées ou plus, donc j'ai besoin d'accéder à l'id de façon dynamique et obtenir une prise de.

source d'informationauteur commonSenseCode | 2016-11-10

  1. 13

    La seule réponse est

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

    Pas d'autres angulaire bizarre cérémonie nécessaires

    Testé sur angulaire 4+

  2. 3

    Utilisation ElementRef classe de @angular/core pour obtenir le parent de l'élément, puis de créer un HTMLElement pour obtenir son dynamique des éléments par nom de classe.

    Composant:

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

    Travail Plunker

    Edit: j'ai utilisé jQuery seulement pour la démonstration rapide but ici. Sinon, vous ne devez pas utiliser jQuery avec Angular.

  3. 0

    Il y a une classe appelée ElementRef classe

    Il donne à votre permis d'accès direct à l'élément ou de la directive hébergement DOM.

    Vous pouvez utiliser ElementRef.nativeElement pour obtenir un élément HTML, vous pouvez accéder à l'élément html propriétés pour effectuer votre modification à l'aide de jQuery ou Rendu classe fournie par Angulaire 2.

    Exemple avec ElementRef et 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');
    }
}
  4. -1

    Vous aurez accès au DOM par le elementRef.

    Injecter jeter votre constructeur par

    constructor(myElement: ElementRef) { ... }

    Et de l'accès à l'élément DOM par le nativeElement propriété

    elementRef.nativeElement.select("#blabla")