Question

我想从Riot API获取数据并在html视图中显示它。但是，我不能＆＃34;持有＆＃34;我的变量中的这个数据。控制台日志显示空数组。我只能在函数范围内看到json数据。我猜，我没有正确使用可观察的功能，我错了吗？这是我的组件。

    import { Component, OnInit } from '@angular/core';
import { FRIEND } from '../../services/_friends/mock-friends';
import { APIKEY } from '../../services/_lolapi/apikey';
import { Http, Response } from '@angular/http';
import { KeysPipe } from '../../pipes/key';
import { JsonPipe } from '@angular/common';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
@Component({
  selector: 'app-friends',
  templateUrl: './friends.component.html',
  styleUrls: ['./friends.component.css']
})
export class FriendsComponent implements OnInit {
friends = FRIEND;
apikey = APIKEY;
nick: string[];
query: string;

  private apiUrl =
  'https://eun1.api.riotgames.com/lol/summoner/v3/summoners/by-name/';
  data: Array<string> = [];

  constructor(private http: Http) {



   }

getFriendData(query) {

return this.http.get(query)
  .map((res: Response) => res.json());

}
getContacts() {
  this.getFriendData(this.query).subscribe(data => {

    this.data = data;
    console.log(this.data);

  });
}


  ngOnInit() {
    for (let i of this.friends) {
        this.query = `${this.apiUrl}${i.nick}${this.apikey}`;
  this.getFriendData(this.query);
   this.getContacts();
console.log(i.nick);
    }
  }

}

Answer 1

您this.getFriendData(this.query)中不需要ngOnInit，就像您拨打getContacts getFriendData的下一行一样。

现在，您的API返回SummonerDTO - 一个复杂的对象，您是否尝试将其存储为数组？这似乎不对。另外，它认为你想将每个结果存储在一个数组中，对吧？在这种情况下，您应该使用：

this.data.push(data);

Angular 2 api数据

1 个答案: