web-dev-qa-db-fra.com

Obtenir élément par id - Angular2

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.

javascriptangulartypescript
38
Natalia

si vous voulez définir une valeur que vous pouvez faire la même chose dans une fonction sur un clic ou sur un événement déclenché.

aussi vous pouvez obtenir une valeur en utilisant ViewChild en utilisant une variable locale comme celle-ci

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

et obtenir de la valeur comme ça

this.abc.nativeElement.value

here is working example

Mise à jour

okay got it, vous devez utiliser la méthode ngAfterViewInit de angualr2 pour la même chose, comme ceci

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

ngAfterViewInit ne générera aucune erreur car il sera rendu après le chargement du modèle

34
Pardeep Jain
(<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.

16
Gopherine

Une approche différente, c'est-à-dire: vous pouvez simplement le faire 'à la Angular manière' 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.

8
AJT_82

Complate Angular Manière (Définir/Obtenir une valeur par ID):

// en balise HTML

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

// Dans le fichier .ts du composant

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

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

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



   }
2
Imranmadbar