如何将input标签的ngModel值转换为angularjs4中的组件？

Question

我是angularjs4的新手。我正在处理angular-cli.Here我需要在我的组件中获取输入标签的ngModel值。如何在输入字段中输入该值？通过使用该值，我需要编写一个用于显示搜索的过滤器我的页面上的数据。如何在angular4中实现这个？这是我的app.component.html和app.component.ts文件：

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

1.如果您想要单向数据绑定（组件到HTML），请使用 -

<input [ngModel]="variable">

2.如果您想要双向数据绑定（组件到HTML，反之亦然），请使用 -

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

3.如果您想在使用单向数据绑定时使用html中输入字段中更改的数据，则必须使用（ngModelChange），如下所示：

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

Answer 2

更新：

如果你想获得输入值，但是没有ng Model（就像在你的snipet中你没有使用它），你可以这样得到：

 <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)
}

---

Usually, the pattern would be:

HTML

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

要么

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

打字稿：

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

这里输入的任何更改都会更新ngModel，因为它是双向绑定的。

• Angular documentation

Answer 3

<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

在TS

name: any

点击这里查看https://stackblitz.com/edit/angular-pmatzc的示例

Answer 4

您可以在模板中使用以下行

<input type="text" [(ngModel)]="username" name="username" class="form-control" placeholder="username"  >

在component.ts文件中，您可以通过this.username访问该元素