接口对象属性未定义,但是角度值

时间:2020-04-08 20:46:51

标签: angular interface undefined response subscribe

我在service.ts中从Node Express服务器调用这些API,并在component.ts中对其进行订阅。我可以检查响应是否正确,是否可以将其复制到接口对象,也可以对其进行console.log。但是,我无法访问该对象的每个属性。当我console.log对象时,它显示每个属性的值,但不能分别看到每个属性(显示未定义)。检查下面的代码。

这是用于存储来自get请求的响应的接口

export interface LOLUserData {
  profileIconId: number;
  name: string;
  puuid: string
  summonerLevel: number;
  revisionDate: number;
  id: string;
  accountId: number;
  profileimg: string;
}

这是来自节点快递服务器的API

app.route("/api/profile/").get((req, res) => {
    fetch("https://na1.api.riotgames.com/lol/summoner/v4/summoners/by-name/" + req.query.name + "?api_key=RGAPI-e98dc13b")
        .then(res => res.json())
        .then(data => {
            res.send({ data });
        })
        .catch(err => {
            res.send(err);
        });
});

这是一项服务。

getdata(name: string): Observable<LOLUserData> {
    return this.http
      .get<LOLUserData>('http://localhost:8000/api/profile/', {
        params: {
          name: name
        }
      }).pipe(map(res => res))

这是订阅

public heroes: LOLUserData; //interface object
getHeroes = (name: string) => {
    this.summonerService.getdata(name).subscribe(hero => {
      this.heroes = hero; //copies a response
      console.log(this.heroes); //I can see all properties here
      this.heroes.profileimg = this.url + this.heroes.profileIconId + ".png";
                                        //this.heroes.profileIconId is undefined
      this.submitted = true;
    }),
      error => this.setErrValue(this.heroes)
  }
}

我可以检查来自节点表达服务器,service.ts和component.ts的响应,所以我认为响应没有问题,但是我不知道为什么响应中的任何单个值都显示为未定义。

2 个答案:

答案 0 :(得分:0)

我实际上发现了为什么给每个属性都不确定的原因。这是因为响应位于名为“ data”的对象中,所以我像heroes [“ data”]。profileIcondId那样做了。但是,我仍然不明白为什么响应是在数据对象中。

答案 1 :(得分:0)

查看来自节点快速服务器的API。 这将发送一个名为“数据”的对象,并且响应属性位于该对象内部,因此...要访问它们,您需要导航

heroes.data.profileIconId 

不是

heroes.profileIconId

我在这里遇到了同样的问题,但是它是在对话框中注入,并通过您的问题解决了搜索...谢谢?