Question

我正在尝试将html文件中的值传递给我的组件，然后将其添加到我的json feed url。

我已经设法将它放到组件并打印到html文件，但是U无法将它附加到我的json feed url的末尾。

此组件和html文件直接来自anguler2 cli

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

这是向流附加值的错误语法。 this.values = value + '';

它正在做的是一次又一次地重写旧的价值观。因此正确的代码是 this.values = this.values + value + '';

Answer 2

正如GünterZöchbauer所说，构造函数是在构建组件时执行的，您无法使用它来更新值。你必须做这样的事情：

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

    })
  }

}

另请注意，如果在main.ts中引导应用程序时未提供HTTP_PROVIDERS，则您的http请求将无效。

传递angular2中的变量

2 个答案: