Question

我最近开始学习Angular / Node，并设法调用API端点并将数据传递给我的视图。

我通过在URL中手动指定我的名字来做到这一点，我现在想要这样做，这样我就可以更改URL中的名称，并通过拉取相应的数据。我已设法让它在Express中工作如下：

//Get Summoner Specific
router.get('/summoner/:summoner', (req, res) => {
    axios.get('https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/' + req.params.summoner, {
        headers: head
    })
    .then(summoner => {
        res.status(200).json(summoner.data);
    })
    .catch(error => {
        res.status(500).send(error);
        console.log(error);
    });
});

所以当我去/ get / summoner / TYPENAME时，我看到传回的正确数据。我现在想要使用Angular在页面上显示这些数据。

服务：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class SummonerService {

  constructor(private http: Http) { }

  // Get all posts from the API
  getSummoner() {
    return this.http.get('/get/summoner/:summoner')
      .map(res => res.json());
  }
}

组件：

import { Component, OnInit } from '@angular/core';
import { SummonerService } from '../summoner.service';

@Component({
  selector: 'app-summoner',
  templateUrl: './summoner.component.html',
  styleUrls: ['./summoner.component.css']
})
export class SummonerComponent implements OnInit {

  summoner: any = [];

  constructor(private summonerService: SummonerService) { }

  ngOnInit() {
    //Get Summoner from API
    this.summonerService.getSummoner().subscribe(summoner => {
      this.summoner = summoner;
    });
  }

}

模板：

<p>
  summoner works!
</p>

{{ summoner.name }}
{{ summoner.id }}

然而，当我去/召唤者/ TYPENAME（希望看到视图中显示的数据）

(node:9916) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: Converting circular structure to JSON

有人可以帮忙吗？

在Angular View中使用URL参数？

0 个答案: