Obține elementul după id – Angular2 (Programare, Javascript, Angular, Typescript)

Natalia a intrebat.

Am un cod:

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

Dar la compilarea codului primesc următoarea eroare:

Property value does not exist on type HTMLElement.

Eu am declarat un var: value: string;.

Cum pot evita această eroare?

Vă mulțumesc.

Comentarii

  • Se pare că doriți o componentă după id, nu un element după id. Totuși, acest lucru nu este acceptat. –  > Por Günter Zöchbauer.
  • Furnizați mai mult cod –  > Por Bo Vandersteene.
  • @GünterZöchbauer Deci, cum pot să prind acest element? <input type='text' id='loginInput'/>? –  > Por Natalia.
  • dacă folosești angular 2 poți folosi funcția de data binding a acestuia aici –  > Por Suraj Rao.
  • Nu faceți asta, urmați doar tutorialul angular.io despre bindings… Există o mulțime de exemple acolo –  > Por Alex Beugnet.
4 răspunsuri
Pardeep Jain

dacă doriți să setați valoarea decât puteți face același lucru în unele funcții la clic sau la focul unor evenimente.

De asemenea, puteți obține valoarea folosind ViewChild folosind o variabilă locală, ca aceasta

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

și să obțineți valoarea în felul următor

this.abc.nativeElement.value

Iată un exemplu de lucru

Actualizare

Bine, am înțeles, trebuie să folosiți ngAfterViewInit din angualr2 pentru același lucru, astfel

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

ngAfterViewInit nu va da nici o eroare, deoarece va fi afișată după încărcarea șablonului.

Comentarii

  • interesant. Este acest lucru adevărat în angular 6?  > Por Gel.
  • Da, este adevărat și pentru Angular 6. –  > Por Soumya Kanti.
  • Este acesta modul preferat în Angular? Funcționează și în Angular 7, dar nu sunt sigur dacă acesta este modul Angular de a face acest lucru. –  > Por skydev.
  • evident că nu @skydev, Dar, conform cerințelor întrebării, am răspuns la această –  > Por Pardeep Jain.
Gopherine
(<HTMLInputElement>document.getElementById('loginInput')).value = '123';

Angular nu poate lua elemente HTML direct, astfel încât trebuie să specificați tipul de element prin legarea generică de mai sus la acesta.

UPDATE::

Acest lucru se poate face, de asemenea, folosind ViewChild cu #localvariable așa cum se arată aici, așa cum se menționează aici

<textarea  #someVar  id="tasknote"
                  name="tasknote"
                  [(ngModel)]="taskNote"
                  placeholder="{{ notePlaceholder }}"
                  style="background-color: pink"
                  (blur)="updateNote() ; noteEditMode = false " (click)="noteEditMode = false"> {{ todo.note }} 

</textarea>

import {ElementRef,Renderer2} from '@angular/core';
@ViewChild('someVar') el:ElementRef;

constructor(private rd: Renderer2) {}

ngAfterViewInit() {
      console.log(this.rd); 
      this.el.nativeElement.focus();      //<<<=====same as oldest way
}

AJT82

O abordare diferită, și anume: ați putea să o faceți „în modul Angular” și să utilizați ngModel și săriți peste document.getElementById('loginInput').value = '123'; cu totul. În schimb:

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

și în componenta dvs. dați aceste valori:

username: 'whatever'
password: 'whatever'

acest lucru va prestabili numele de utilizator și parola la navigarea în pagină.

Comentarii

  • Ce se întâmplă dacă trebuie să trec valoarea din fișierul javascript extern în câmpul de formular al componentei angular? Asta am făcut eu, am un algoritm care stă în fișierul javascript, când algoritmul a terminat de generat valoarea, și o trece înapoi în formularul angular folosind acest cod, getDocumentById(‘input’).value = someValue; . Dar, când încerc să recuperez valoarea în evenimentul OnSubmit(), am primit valoarea nedefinită. Aveți vreo idee? –  > Por DavidB.
Imranmadbar

Complate Angular Way ( Set/Get value by Id ):

// În tag-ul Html

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

// În fișierul .ts al componentei

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

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

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



   }