Question

我一直在努力学习Angular / NodeJS并且到目前为止一直没事，但是我遇到了一些我似乎无法过去的障碍。

所以我使用Node来运行API调用，使用和Angular Service将响应传递给组件并在视图中呈现它（我对这一切都很新，所以我的术语可能不会道歉）！

我成功地使用：https://jsonplaceholder.typicode.com

成功完成了这项工作

然而，我使用RIOT API复制它，因为我想使用更个性化的东西来学习。

组件：

export class SummonerComponent implements OnInit {

  title = 'Summoner Search';

  summoner: any = [];

  constructor(private summonerService: SummonerService) { }

 ngOnInit() {

   this.summonerService.getSummoner().subscribe(summoner => {
     this.summoner = summoner;
   });

  }
}

API调用：

router.get('/summoner/', (req, res) => {
  rp({
    uri: 'https://euw.api.riotgames.com/api/lol/EUW/v1.4/summoner/by-name/MYSUMMONERNAME',
    qs: {

    },
    headers: {
        MY HEADERS         
    },
    json: true
  })
  .then((data)=> {
    res.status(200).json(data);
    console.log(data);
  })
  .catch(error => {
    res.status(500).send(error)
  });

}）

服务：

@Injectable()
export class SummonerService {

  constructor(private http: Http) { }

  getSummoner(){
    return this.http.get('/get/summoner')
    .map(res => res.json());
  } 

}

HTML：

<h2> {{ summoner.name }} </h2>
<p>
  {{ summoner }}
</p>
<p>
  summoner works!
</p>

在我的HTML {{summoner}}中显示[Object] [Object]添加JSON管道，例如{{召唤者| json}}我看到从Call（YAY）

返回的实际数据

但是{{summoner.name}}不会在视图中呈现。我没有收到错误，它只是没有加载属性？

返回的数据结构如下：

{"MYSUMMONERNAME":{"id":MYID,"name":"MYSUMMONERNAME","profileIconId":"ICONID","revisionDate":"REVISIONDATE","summonerLevel":"MYLEVEL"}}

不会显示任何属性，例如{{summoner.summonerLevel}}等

它可能很小，但我不能让它渲染。

由于

Answer 1

将其更改为，

this.summonerService.getSummoner().subscribe(summoner => {
     this.summoner = summoner.MYSUMMONERNAME;
});

Answer 2

尝试以下方法。将服务方法更改为

//In your service
getSummoner(){
    return this.http.get('/get/summoner')
    .map(res => res.json()[0]);
  } 

//In your component
summoner: any;//summoner is not an array, is a POJO

//In your template
<ng-container *ngIf="summoner">
  //here your current template
</ng-container>

根据建议，使用HTTP请求的返回数据定义接口

更新：对您的评论的个人建议

假设您将用户名作为参数提供给服务方法，并且您希望获得单个条目结果：

getSummoner(summonerId: string){
    return this.http.get(`/get/summoner/${summonerId}`)
    .map(res => res.json().[summonerId]);
  }

不知何故，你需要在你的后端捕获/解析/检索这个路由参数值，但我不能告诉你我是如何获得0经验的：D

Angular2 - 可以显示对象，属性不会显示

2 个答案: