Obtenir élément par id - Angular2

Question

J'ai un code:

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

Mais lors de la compilation du code, le message d'erreur suivant s'affiche:

La valeur de la propriété n'existe pas sur le type HTMLElement.

J'ai déclaré un var: value: string; .

Comment puis-je éviter cette erreur?

Je vous remercie.

Answer 1

si vous souhaitez définir la valeur que vous pouvez faire de même dans une certaine fonction sur sur ou dans certains cas d'incendie.

aussi, vous pouvez obtenir la valeur à l'aide de ViewChild à l'aide de la variable locale comme ceci

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

et d'obtenir la valeur, comme ceci

this.abc.nativeElement.value

voici un exemple fonctionnel

Mise à jour

ok il a obtenu , vous devez utiliser ngAfterViewInit méthode de angualr2 pour les mêmes, comme cette

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

ngAfterViewInit ne jeter aucune erreur car il sera rendu après le modèle de chargement

Answer 2

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

Angular ne peut pas prendre directement les éléments HTML, vous devez donc spécifier le type d’élément en y liant le générique ci-dessus.

Answer 3

Une approche différente, c'est-à-dire: vous pouvez simplement le faire 'à la manière angulaire' et utiliser ngModel et ignorer document.getElementById('loginInput').value = '123'; . Au lieu:

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

et dans votre composant, vous donnez ces valeurs:

 username: 'whatever'
password: 'whatever'
 

cela prédéfinira le nom d'utilisateur et le mot de passe lors de la navigation vers la page.