web-dev-qa-db-ja.com

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に動的にアクセスし、IDを保持する必要があります。

angularangular2-templateangular2-directives
25
CommonSenseCode

唯一の応答は

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

他のangular奇妙なセレモニーは必要ありません

angular 4+でテスト済み

30
David F.

@angular/coreのElementRefクラスを使用して親要素を取得し、HTMLElementを作成してクラス名で動的要素を取得します。

コンポーネント：

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

ワーキングプランカー

編集：ここでは、jQueryをクイックデモ用にのみ使用しました。それ以外の場合は、jQueryでAngularを使用しないでください。

9
Syed Ali Taqi

DOMからelementRefにアクセスできます。

コンストラクタを介して注入する

constructor(myElement: ElementRef) { ... }

DOMプロパティでnativeElement要素にアクセスします

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