Question

我是Angular 2和Typescript的新手，所以请原谅我这个问题，但是我无法理解在成功调用REST Api后如何使用数据。我为我的例子制作了一个plunker，因此更容易解释我要做的事情。

查看示例时请忽略未使用的导入。

调用函数getWeather可以正常工作。

getWeather(query) {
        const endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98';
        return this.http
            .get(endpoint)//, {search: searchParams})
            .map(res => res.json().main)
            .subscribe(res => console.log('weather json response = ' + JSON.stringify(res))
            );
    }

但如何存储数据？我的意思是我必须创建一个类似于json响应的对象，并使用if来显示数据以及如何显示？

编辑： Here是我的代码的一个有效例子。

Answer 1

恢复数据时，您只需使用this关键字将它们设置为组件的属性。

在HTTP请求的情况下，当调用使用subscribe方法注册的第一个回调时，数据就在那里。

使用箭头函数定义此回调允许通过this关键字使用组件实例（在本例中为contextual）。

getWeather(query) {
  const endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98';
  return this.http
      .get(endpoint)//, {search: searchParams})
      .map(res => res.json().main)
      .subscribe(res => {
        this.weather = data;
       });
}

然后模板可以引用这些属性来显示带有ngFor，{{...}}或插值的数据。小心处理observable的异步方面，例如异步管道，ngIf或Elvis操作符（？）。

<div>{{weather?.someProperty}}</div>

Answer 2

您确实可以创建一个类来模拟json响应并转换为它，或者只是将其用作any并使用点符号来提取和显示数据。只需添加一个字段并为其分配响应即可。像这样：

countryData: any;

getWeather(query) {
    const endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98';
    return this.http
        .get(endpoint)//, {search: searchParams})
        .map(res => res.json().main)
        .subscribe(res => this.countryData = res)
        );
}

如果你想事先将它建模为一个类，你也可以这样做：

countryData: Country;

getWeather(query) {
    const endpoint = 'http://api.openweathermap.org/data/2.5/weather?q=London,uk&appid=44db6a862fba0b067b1930da0d769e98';
    return this.http
        .get(endpoint)//, {search: searchParams})
        .map(res => res.json().main)
        .subscribe(res => this.countryData = <Country>res)
        );
}

请注意，如果您使用第二种方法并强制转换为Country或您为其命名的任何内容，那么它将没有您在该类上定义的任何可用方法。

了解如何调用REST Api并在Angular 2中显示响应中的数据

2 个答案: