Wie man ngModel Wert des Eingabe-tag in eine Komponente in angularjs4?

Ich bin neu angularjs4. Ich arbeite auf angular-cli.Hier muss ich, um den Wert eines ngModel Wert des Eingabe-tag in meine Komponente.Wie kann ich erreichen, dass der eingegebene Wert im input-Feld?Mit diesem Wert muss ich schreiben, ein filter für die Anzeige der durchsuchten Daten auf meiner Seite.Wie kann ich die Implementieren diese in angular4?.
Hier ist meine app.component.html und app.Komponente.ts-Dateien:

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>

InformationsquelleAutor srujana | 2017-09-22

4

1.Wenn Sie möchten, eine Wege-Datenbindung (Komponente HTML), verwenden Sie -

<input [ngModel]="variable">

2.Wenn Sie möchten, zwei-Wege-Datenbindung (Komponente in HTML und Umgekehrt), nutzen -

<input [(ngModel)]="variable">

3.Wenn Sie möchten, arbeiten Sie mit den veränderten Daten im input-Feld in html-während der Arbeit mit one-way data binding, Sie haben zu verwenden (ngModelChange) wie folgt :

<input [ngModel]="variable"(ngModelChange)="function_to_fire_on_model_change($event)">

InformationsquelleAutor Harunur Rashid
2

UPDATE:

Wenn Sie möchten, um den input-Wert, aber ohne ngModel (wie in deinem snipet Sie ihn nicht verwenden), können Sie bekommen wie diese:
```
 <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)
}
```
In der Regel, das Muster wäre:

HTML
```
<input [(ngModel)]="yourModel" ....> 
```
oder
```
<input [ngModel]="yourModel" (ngModelChange)="doSomething($event)"....> 
```
Typoskript:
```
yourModel:any;
....
doSomething(event){
   console.log(event) //input value is logged
}
```
Hier alle änderungen in der Eingabe aktualisiert die ngModel, wie es die zwei-Wege gebunden.
- Winkel-Dokumentation
- wie bekomme ich diesen Wert?
- Durch die Initialisierung der Eigenschaft der Klasse gebunden an den Eingang
- Gibt es keine Notwendigkeit zu importieren ngModel Modul app.- Modul.ts?
- Sie haben, um die Klasse zu definieren-Eigenschaft für die Bindung an die ngModel, es ist nicht von Winkel-standardmäßig
- Bitte siehe mein update
- Ich glaube, meine Antwort bezog sich auf alle Fälle, während die andere Antwort nur wiederholt. Zumindest hat dieser Ihnen helfen?
InformationsquelleAutor Vega

<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

In TS

name: any

Schauen Sie hier für ein Beispiel https://stackblitz.com/edit/angular-pmatzc

InformationsquelleAutor Sibiraj

0

können Sie die folgende Zeile in der Vorlage
```
<input type="text" [(ngModel)]="username" name="username" class="form-control" placeholder="username"  >
```
und der Komponente.ts-Datei können Sie den Zugriff auf das element von diesem.Benutzername

InformationsquelleAutor abin peter

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.