Angular 2 http重复数据

Question

我终于正确地为我的申请提出了http请求。 出于我自己的目的，我将服务分开了。 我的数据只是复制了我组件的每个构造。

正如您在屏幕截图中看到的那样。

如何优化我的请求？

export class FriendsComponent implements OnInit {
data: any;

  constructor(dataService: DataService) {
    for (let i of dataService.friends) {
      dataService.query = `${dataService.apiUrl}${i.nick}${dataService.apikey}`;

      dataService.getContacts();

    }

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



 ngOnInit() {

 }

}

DataService

@Injectable() 
export class DataService {
  friends = FRIEND;
  apikey = APIKEY;
  nick: string[];
  query: string;

  public apiUrl =
    'https://eun1.api.riotgames.com/lol/summoner/v3/summoners/by-name/';
  data: Array<any> = [];
  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.push(data);
    });
  }
}

在app.module.ts中，在“提供者”部分，我有“DataService”服务。

Answer 1

您正在推送到服务中的相同数组，而不是在组件

中进行

 data: any;
 constructor(dataService: DataService) {    
      dataService.query = `${dataService.apiUrl}${i.nick}${dataService.apikey}`;
      this.dataService.getFriendData(this.query).subscribe(data => {
           this.data = data;
    });
}