web-dev-qa-db-fra.com

Angular2 Comment obtenir une référence d'éléments HTML générés dynamiquement

J'ai ces 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>

S'il vous plaît noter id=my-input-{{i}} J'aimerais obtenir une référence à l'élément DOM en fonction de cet identifiant dynamique. Cette entrée peut avoir 3, 6 entrées ou plus, je dois donc accéder à l'id de manière dynamique et la conserver.

angularangular2-templateangular2-directives
25
CommonSenseCode

La seule réponse est

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

Aucun autre angular étrange nécessaire)

Testé sur angular 4+

30
David F.

Utilisez ElementRef class from @angular/core pour obtenir l’élément parent, puis créez un HTMLElement pour obtenir ses éléments dynamiques 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);
  }
}

plunker de travail

Edit: J'ai utilisé jQuery uniquement pour une démonstration rapide but ici. Sinon, vous ne devriez pas utiliser jQuery avec Angular.

9
Syed Ali Taqi

Vous pouvez accéder au DOM par le elementRef.

Injectez-le à travers votre constructeur en

constructor(myElement: ElementRef) { ... }

Et accédez à l'élément DOM par la propriété nativeElement

myElement.nativeElement.select("#blabla")
0
quindimildev