Angular2 - http.post(...).map 不是一个函数。

Question

我查看了所有的 Github 问题和 StackOverflow 帖子，但是我无法让它工作。

(https://github.com/angular/angular/issues/5632)

(使用 TypeScript 的 Angular 2 HTTP GET 错误：http.get(...).map 不是一个函数 [null])

• 我正在使用 Angular2@2.0.0-beta.1。
• Rxjs（rxjs@5.0.0-beta.1）在控制台/资源中成功导入时检查。

我尝试了不同的导入方式：

import 'rxjs/add/operator/map';

import 'rxjs/rx';

但我仍然收到错误 http.post(...).map is not a function

更新 - 代码上下文

let body = "email=" + email + "&password=" + password;
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-from-urlencoded');
this.http.post('http://angular.app/api/v1/auth') // angular.app is laravel backend
      .map( (responseData) => {
          return responseData.json();
      })

- Angelo A

---

你能否给我们提供关于你的HTTP调用代码的更多细节？谢谢！ - Thierry Templier

@ThierryTemplier，请查看我的更新。 - Angelo A

谢谢！当调用你的bootstrap函数时，你是否添加了HTTP_PROVIDERS？ - Thierry Templier

@ThierryTemplier 我没有！这确实改变了一些东西，因为现在我得到了另一个错误：ReferenceError: map is not defined，但是我在每个文件中都导入了 rxjs/add/operator/map（甚至在我的主文件中）。 - Angelo A

@ThierryTemplier 上述是问题所在（我需要添加HTTP_PROVIDERS）。我还有另一个错误导致了上述错误。（语法问题，我的错）。你能把这个作为答案发出来，这样我就可以接受了吗？ - Angelo A

Answer 1

对我来说，http.post(...).map() 可以正常使用。 我确实需要导入 'rxjs/Rx'。

import {Component} from 'angular2/core';
import {Http} from 'angular2/http';
import 'rxjs/Rx';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <p>Test result {{result | json}}</p>
    `
})
export class App implements OnInit{
 public title = 'my title';
 public result : String;

constructor(private _http : Http) {
  _http.post('http://jsonplaceholder.typicode.com/posts')
    .map(res => res.json())
    .subscribe(
      data => this.result = data,
      err => console.log('ERROR!!!'),
      () => console.log('Got response from API', this.result)
    );
  }
}

请查看plunker示例：http://plnkr.co/edit/vise2zYxZUmr1kW65mNY?p=preview

希望这能帮助您找到问题。

- Stefan van de Vooren

---

这对我有用。我遇到了与"@angular/core": "^4.0.0"，"rxjs": "^5.1.0" ...相同的问题。 - Dev

Answer 2

看起来Angular2 beta.1需要RxJS 5.0.0-beta.0。这可能是您问题的原因。

如果我在我的package.json文件中尝试这个：

"dependencies": {
    "angular2": "2.0.0-beta.1",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.1",
    "zone.js": "0.5.10"
},

我遇到了一个错误，Angular2需要RxJS 5.0.0-beta.0版本。

编辑

你需要在bootstrap函数的第二个参数中添加HTTP_PROVIDERS。

希望对你有所帮助， Thierry

- Thierry Templier

---

我尝试了beta.0版本，但仍然没有运气，我得到了相同的错误（“ReferenceError：map未定义”）。 - Angelo A

@AngeloA 你试过这样导入吗：import 'rxjs/Rx';（注意是 Rx 而不是 rx）？ - Thierry Templier

是的，我做到了（大写R）。 - Angelo A

这真的很奇怪。你能否创建一个plunkr来重现这个问题吗？谢谢！这里有一个描述工作HTTP示例的链接：https://plnkr.co/edit/XFmSGw4etdGvvPNkJxkI?p=preview。 - Thierry Templier

尽管添加了导入，我仍然遇到了同样的问题。@AngeloA，你能解决这个问题吗？我正在使用"@angular/common": "2.0.0-rc.5"和"rxjs": "5.0.0-beta.6"。 - john mitsch

@johnmitsch 说实话，我已经停止使用Angular了。在那个时候它有太多的缺陷。据我所记，我没有解决它。你应该在Stack Overflow上搜索其他帖子。我认为这个问题现在应该已经解决了。 - Angelo A