angular - 接口(interface)对象属性未定义，但有 Angular 值

Question

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

这是存储获取请求响应的接口(interface)

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

这是来自 node express 服务器的 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);
        });
});

这是一个服务.ts

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)
  }
}

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

Answer 1

查看来自 node express 服务器的 API。它发送一个名为“数据”的对象，响应属性在该对象内，所以...要访问它们，您需要通过导航

heroes.data.profileIconId 

不是

heroes.profileIconId

我在这里遇到了同样的问题，但它是在对话框中注入(inject)，并通过你的问题解决了搜索......谢谢😎