使用Angular observable和http

我尝试了解更多关于Observable的信息，我使用它们从url获取一些json数据，但是我有一些get方法的问题。另外我想知道如果有这个问题的另一个解决方案。使用Angular observable和http

import { Component , ViewChild , AfterViewInit } from '@angular/core'; 
import {Observable} from 'rxjs/Rx'; 
import {Http} from '@angular/http'; 
@Component({ 
selector: 'app-root', 
template: `<h1>Hello World!</h1> 
      <input type="text" #name > 
      `, 


}) 

export class AppComponent implements AfterViewInit{ 
@ViewChild ('name') input; 

constructor(private http: Http){} 

ngAfterViewInit(){ 

    var keyup = Observable.fromEvent(this.input.nativeElement,"keyup") 
          .map((data: any) => data.target.value) 
          .filter(text => text.length >= 3) 
          .distinctUntilChanged() 
          .debounceTime(400) 
          .flatMap(result => { 
          var url = "https://freemusicarchive.org/api/trackSearch?limit=10&q="+result; 
          var res = this.http.get(url).map(data => {data.json()}); 
          return res 
          }); 
    keyup.subscribe(data => console.log(data)); 
} 
}

来源

2017-06-14 M.J

它说导入HttpModule：无法读取属性“得到”的未定义 –

你永远不注入HTTP是：http;进入你的构造函数。 – Igor

无法读取的不确定

属性 'GET' 你不注入http实例到你的构造和Angular relies on dependency injection。添加以下内容并确保主模块已注册http模块，以便您可以将它们用于DI。从类定义中删除当前的http变量。

constructor(private http: Http) {}

在您的应用程序模块确保您从'@angular/http'

来源

2017-06-14 15:39:36 Igor

我补充说，但现在我得到错误后，将http添加到我的app.module.ts：模块'AppModule'导入的意外值'Http'。请添加@NgModule注释。 –

@ M.J - 请阅读我答案的最后一句。您必须在您的应用程序模块中导入'HttpModule'以使用'http'服务。 – Igor

感谢您的回复，你知道任何其他方式，而不是http，我能从上面的url得到json结果吗？ –

使用Angular observable和http

回答

相关问题