来自angu的本地主机请求

Question

你好，我用python在Flask中创建了一个迷你端点，它工作得很好。当我从邮递员那里访问它时：

http://127.0.0.1:5000/retrieve_data

它以json的形式检索数据。 但当我从角度调用端点时：

export class HomeComponent implements OnInit {
  title = 'angular-demo';
  data = this.getAnnounce();

  getAnnounce() {
    return this.http.get('http://127.0.0.1:5000/retrieve_data');
  }

  constructor(private http: HttpClient) {

  }

实际结果是：

^{pr2}$

附言：我在阿努格拉尔很不起眼

Answer 1

从document of angular's http client开始，返回值的类型http.get()是Observable

因此，如果要获取服务器响应的数据，必须按以下方式订阅：

data = {};

getAnnounce() {
    this.http.get('http://127.0.0.1:5000/retrieve_data')
        .subscribe(result => this.data = result);
}

Answer 2

您必须订阅您的getAnnounce函数。在

例如，您可以尝试：

data = this.getAnnounce().subscribe();

或直接在您的constructor/ngOnInit上：

^{pr2}$

Answer 3

很好的问题，正如其他一些人所说的那样，似乎您的getAnnounce()方法中缺少一个.subscribe()。Angular Docs has a guide on observables这可以帮助你更好地理解。在

我还有一些建议可以改善你的角度。利用services将相似的功能组合在一起。例如，在您提供的代码中，您可以将getAnnounce()移动到您创建的新服务中；类似于AnnouncementService。然后可以在代码的许多地方使用它。它也有助于测试它，并在以后发现错误，因为你的代码是更分离的。在

您可以做的另一件事是将服务器api地址移动到环境变量中。默认情况下，如果您使用Angular CLI构建角度项目，您将在src文件夹中找到一个environments文件夹，其中默认有两个文件environment.ts和{}。您可以在.ts文件中的任何位置访问此JSON对象，并且当您在本地为product vs构建代码时，它可以将值更改为您设置的值。在您的例子中，您将把您的本地API地址放在那里http://127.0.0.1:5000。在

export const environment = {
  production: false,
  api: 'http://127.0.0.1:5000'
};

现在，您可以轻松地访问它，并且如果您更改了端口号或在真正的服务器上安装了api，则有一个地方需要更改。在

import { environment } from './environments/environment';

/* remember to import the non prod version of the environment file, angular knows how to switch them automatically when building for production or not. */

希望这对你的编码有帮助，祝你好运！在