web-dev-qa-db-ja.com

IDで要素を取得-Angular2

私はコードをもっている：

document.getElementById('loginInput').value = '123';

しかし、コードのコンパイル中に次のエラーが表示されます。

タイプHTMLElementにプロパティ値が存在しません。

変数を宣言しました：value: string;。

このエラーを回避するにはどうすればよいですか？

ありがとうございました。

javascriptangulartypescript
38
Natalia

値を設定する場合は、クリック時またはイベント発生時に同じ機能を実行できます。

また、このようなローカル変数を使用してViewChildを使用して値を取得することもできます

<input type='text' id='loginInput' #abc/>

そして、このような価値を得る

this.abc.nativeElement.value

here is working example

更新

大丈夫、あなたはこのような同じためにangualr2のngAfterViewInitメソッドを使用する必要があります

ngAfterViewInit(){
    document.getElementById('loginInput').value = '123344565';
  }

ngAfterViewInitは、テンプレートのロード後にレンダリングされるため、エラーをスローしません。

34
Pardeep Jain
(<HTMLInputElement>document.getElementById('loginInput')).value = '123';

Angularは、上記のジェネリックをバインドして要素タイプを指定する必要があるため、そこにhtml要素を直接取り込むことはできません。

16
Gopherine

別のアプローチ、つまり、「Angularの方法」でそれを実行し、ngModelを使用してdocument.getElementById('loginInput').value = '123';をすべてスキップすることもできます。代わりに：

<input type="text" [(ngModel)]="username"/>
<input type="text" [(ngModel)]="password"/>

そしてあなたのコンポーネントでこれらの値を与えます：

username: 'whatever'
password: 'whatever'

これにより、ページに移動するときにユーザー名とパスワードが事前設定されます。

8
AJT_82

Complate Angular Way（Idによる値の設定/取得）：

// Htmlタグ内

 <button (click) ="setValue()">Set Value</button>
 <input type="text"  #userNameId />

//コンポーネント.tsファイル

    export class testUserClass {
       @ViewChild('userNameId') userNameId: ElementRef;

      ngAfterViewInit(){
         console.log(this.userNameId.nativeElement.value );
       }

      setValue(){
        this.userNameId.nativeElement.value = "Sample user Name";
      }



   }
2
Imranmadbar