Comment obtenir la valeur ngModel d'une balise d'entrée dans un composant dans angularjs4?

Question

Je suis nouveau sur angularjs4. Je travaille sur angular-cli.Ici j'ai besoin d'obtenir la valeur d'une valeur ngModel de tag d'entrée dans mon composant.Comment puis-je obtenir cette valeur entrée dans le champ de saisie? En utilisant cette valeur, j'ai besoin d'écrire un filtre pour l'affichage recherché données sur ma page.Comment puis-je mettre en œuvre celui-ci en angulaire4 ?. Voici mon app.component.html et app.component.ts fichiers:

import { 
    Component 
} from '@angular/core'; 
import { 
    Http, 
    Response, 
    Headers, 
    RequestOptions 
} from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    productsList = ''; 
    show: boolean; 
    hide: boolean; 
    listBtn: boolean; 
    gridBtn: boolean; 
    values = ''; 

    onKey(event: any) { // without type info 
     this.values += event.target.value; 
     console.log("value " + this.values); 
    } 
    listView() { 
     this.gridBtn = true; 
     this.show = true; 
     this.hide = false; 
     this.listBtn = false; 
    } 
    gridView() { 
     this.listBtn = true; 
     this.gridBtn = false; 
     this.show = false; 
     this.hide = true; 

    } 
    constructor(private http: Http) { 
     this.show = false; 
     this.hide = true; 
     this.show = false; 
     this.listBtn = true; 
     this.gridBtn = false; 
     this.getData(); 
    } 
    createAuthorizationHeader(headers: Headers) { 
     headers.append('Authorization', 'Basic ' + 
      btoa('ck_543700d9f8c08268d75d3efefb302df4fad70a8f:cs_f1514261bbe154d662eb5053880d40518367c901')); 
     headers.append("Content-Type", "application/x-www-form-urlencoded"); 
    } 
    getData() { 
     console.log('hellooo'); 
     let headers = new Headers(); 
     this.createAuthorizationHeader(headers); 
     return this.http.get(' https://www.colourssoftware.com/wordpress/wp-json/wc/v2/products', { 
      headers: headers 
     }) 
      .subscribe(res => { 
       const products = res.json(); 
       console.log(products); 
       this.productsList = products; 
       console.log(this.productsList); 
      }) 


    } 

} 

HTML

<div class="container" align="center"> 
    <div class="row"> 
     <div class="col-sm-6 col-sm-offset-3"> 
      <div class="input-group stylish-input-group"> 
       <input type="text" class="form-control" placeholder="Let's find your product....." (keyup)="onKey($event)"> 
       <span class="input-group-addon"> 
        <button type="submit"> 
         <span class="glyphicon glyphicon-search"></span> 
        </button> 
       </span> 
      </div> 
     </div> 
    </div> 
    <br> 
</div> 


<br> 
<div *ngIf="show"> 
    <ul class="list-group"> 
     <li class="list-group-item" *ngFor="let data of productsList"> 
      <img src="{{data.images[0].src}}" alt="image" width="auto" height="200px"> 
      <span>{{data.name}}</span> 
      <span>{{data.regular_price}}</span> 
     </li> 
    </ul> 
</div> 

Answer 1

MISE À JOUR:

Si vous souhaitez obtenir la valeur d'entrée, mais sans ngModel (comme dans votre snipet vous ne l'utilisez pas), vous pouvez obtenir comme ceci:

<input type="text" #input class="form-control" placeholder="Let's find your product....." (keyup)="onKey($event, input.value)"> 

onKey(event, newValue){ 
    console.log(newValue); 
    console.log(event.key) 
} 

---

Habituellement, le modèle serait:

HTML

<input [(ngModel)]="yourModel" ....> 

ou

<input [ngModel]="yourModel" (ngModelChange)="doSomething($event)"....> 

Tapuscrit:

yourModel:any; 
.... 
doSomething(event){ 
    console.log(event) // input value is logged 
} 

Ici, tout changement dans l'entrée mettra à jour le ngModel car il est bidirectionnel.

• Angular documentation

Answer 2

<input [(ngModel)]="name"> // two way data binding 

<input [(ngModel)]="name" (ngModelChange)="change()"> // two way data binding with onchange property 

<input [ngModel]="name"> // one way data binding 

Dans TS

name: any 

Vérifiez ici pour un exemple https://stackblitz.com/edit/angular-pmatzc