Передача переменной в angular2

Question

Я пытаюсь передать значение из файла html в свой компонент, а затем добавить его в свой URL-адрес канала json.

Мне удалось получить его в компоненте и распечатать в html-файле, но U не может подключить его к концу моего json-канала.

Этот компонент и HTML файл прямо из anguler2 кли

app.component.ts

import { Component } from '@angular/core'; 
import {Http} from '@angular/http'; 
import {HTTP_PROVIDERS} from '@angular/http'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 

    values = ''; 
    onKey(value: string) { 
    this.values = value + ''; // pass this value to the url below 
    } 


    people: Array<Object>; 
    constructor(http:Http) { 
     http.get('http://myurl.com/json_feed.php?q=' + this.values) // get the value from above 
     .subscribe(res => { 
     this.people = res.json(); 
     }) 
    } 

} 

app.component.html

<h1> 
    {{title}} 
</h1> 

<input #box (keyup)="onKey(box.value)"> 

{{values}} 

<ul *ngFor="let person of people"> 
    <li class="text"> 
    {{person.model}} 
    </li> 
</ul> 

Answer 1

Как сказал Гюнтер Цохбауэр, конструктор выполняется во время построения компонента, и вы не можете использовать его для обновления значений. Вы должны сделать что-то вроде этого:

export class AppComponent { 

    ... 

    values = ''; 

    onKey(value: string) { 

    this.values += value + ''; 

    getData(); // call getData method 
    } 

    people: Array<Object>; 

    constructor(public http: Http) { 

    } 

    getData(){ 

     this.http.get('http://myurl.com/json_feed.php?q=' + this.values) 
     ... 

    }) 
    } 

} 

Также обратите внимание на ваш запрос HTTP не будет работать, если вы не предоставите HTTP_PROVIDERS при начальной загрузке приложения в main.ts.

Answer 2

Это неправильно синтаксис для добавления значения в поток. this.values = value + '';

Что он делает, это переопределение старых значений снова и снова. Поэтому правильный код this.values = this.values + value + '';