为什么这个 Angular 类属性未定义？答案

【问题标题】：Why is this Angular class property undefined?为什么这个 Angular 类属性未定义？
【发布时间】：2020-03-03 01:48:06
【问题描述】：

我目前正在开发一个 Angular 项目，该项目可以为不同的网页游戏创建大厅。这个想法是应用程序已经聚集了玩家，因此可以立即启动网页游戏。

但是现在我遇到了一个由从我的 Springboot Java API 获取数据引起的问题。 Angular 应用程序正确获取数据，但是当我在订阅课程后尝试将 observable 转换为普通 Game[] 时。它使 Game[] 中元素的所有属性都未定义。 发生这种情况的原因是什么？

游戏服务：

//Returns a list of all games known to the API
  getAllGames() :Observable<Game[]>
  {
    return this.httpClient.get<Game[]>(this.connectionService.getConnectionString()+"/games",this.httpOptions)
  }

游戏类：

export class Game {
    public Id : String;
    public Name: String;
    public RedirectURI : String;
    public MinUserCount : Number;
    public MaxUserCount : Number;

    constructor(Id : String,Name : String,RedirectURI : String,MinUserCount : Number,MaxUserCount : Number)
    {
        this.Id = Id;
        this.Name = Name;
        this.RedirectURI = RedirectURI;
        this.MinUserCount = MinUserCount;
        this.MaxUserCount = MaxUserCount;
    }

}

组件：

 games: Game[];
 //Get all games known to the API
    this.gameService.getAllGames().subscribe( elements => this.games = elements )
 //This doesn't work all the elements of this.games are undefined.

我还尝试使用返回的数组的 foreach。也没有效果

 games: Game[];
//Get all games known to the API
    this.gameService.getAllGames().subscribe(elements => {
      elements.forEach(item => {
        var game = new Game(item.Id, item.Name, item.RedirectURI, item.MinUserCount, item.MaxUserCount)
        this.games.push(game)
      })

    })

GetRequest 的 JSON 结果

[
    {
        "name": "QuizGame",
        "id": "dg217d65126b5e31v6d5v5d15v564d",
        "maxUserCount": 4,
        "redirectURI": "http://localhost:8082",
        "minUserCount": 1
    },
    {
        "name": "RPG",
        "id": "dt76TQWR127367125SDYATFHa32615",
        "maxUserCount": 10,
        "redirectURI": "http://localhost:8083",
        "minUserCount": 0
    },
    {
        "name": "Scribble Clone",
        "id": "378167e86dsahdgahkj312DJKHDg2d",
        "maxUserCount": 9,
        "redirectURI": "http://localhost:8084",
        "minUserCount": 1
    },
    {
        "name": "WebPonker",
        "id": "0o00dhsnvkjzbcxhgjyg23v2gh3dvg",
        "maxUserCount": 4,
        "redirectURI": "http://localhost:8085",
        "minUserCount": 4
    }
]

【问题讨论】：

标签： arrays json angular typescript http

【解决方案1】：

您的 JSON 响应中的属性以小写字母开头。
在您的 Game 类中，您使用以大写字母开头的属性。
我相信从 JSON 到 typescript 对象的解析是区分大小写的。您可以尝试将属性的第一个字母更改为小写吗？

【讨论】：

你说得对，在将 JSON 解析为对象时，打字稿确实是区分大小写的。我还发现我的 Game[] 也没有初始化。所以我把它改成了 Set。但无论如何，非常感谢你。