Html 如何正确地为嵌套对象创建角度？

我在API中有一个类似这样的JSON对象：

{
   "count": 58,
   "next": //API URL OF THE NEXT PAGE CUS WE HAVE PAGINATION HERE
   "previous": //API URL OF THE PREVIOUS PAGE 
   "results": [
     {
      "game_id":3,
      "title":"Basketball"
     },
     {
      "game_id":4,
      "title":"Football"
     }
     //THE LIST GOES ON AND ON LIKE THIS
   ]
}

所以我有一节课是这样的

export class TheGames{ 
    count:number;
    next:string;
    previous:string;
    public results = new class {
        game_id:number;
        title:string;
    }
}

 game: TheGames[];
 //gameandcatservice is the service that I use and get games returns the games from API
  this.gameandcatservice.getGames().subscribe(data=>{
    this.game=data;

<div *ngFor="let g of game['results']">
   <!-- SOMETHING HERE -->
</div>

    count: 58
    next: "http://localhost:8000/api/games?page=2"
    previous: null
    results: Array(10)
    0:
    game_id: 3
    title: "Basketball"
    __proto__: Object
    1:
    game_id: 8
    title: "Football"
    __proto__: Object
   //LIST GOES LIKE THIS FOR 10 ELEMENTS

在我的ts文件中，我像这样订阅它们

export class TheGames{ 
    count:number;
    next:string;
    previous:string;
    public results = new class {
        game_id:number;
        title:string;
    }
}

 game: TheGames[];
 //gameandcatservice is the service that I use and get games returns the games from API
  this.gameandcatservice.getGames().subscribe(data=>{
    this.game=data;

<div *ngFor="let g of game['results']">
   <!-- SOMETHING HERE -->
</div>

    count: 58
    next: "http://localhost:8000/api/games?page=2"
    previous: null
    results: Array(10)
    0:
    game_id: 3
    title: "Basketball"
    __proto__: Object
    1:
    game_id: 8
    title: "Football"
    __proto__: Object
   //LIST GOES LIKE THIS FOR 10 ELEMENTS

在html文件中，我是这样做的

export class TheGames{ 
    count:number;
    next:string;
    previous:string;
    public results = new class {
        game_id:number;
        title:string;
    }
}

 game: TheGames[];
 //gameandcatservice is the service that I use and get games returns the games from API
  this.gameandcatservice.getGames().subscribe(data=>{
    this.game=data;

<div *ngFor="let g of game['results']">
   <!-- SOMETHING HERE -->
</div>

    count: 58
    next: "http://localhost:8000/api/games?page=2"
    previous: null
    results: Array(10)
    0:
    game_id: 3
    title: "Basketball"
    __proto__: Object
    1:
    game_id: 8
    title: "Football"
    __proto__: Object
   //LIST GOES LIKE THIS FOR 10 ELEMENTS

我不知道为什么会发生这种情况，因为我已经在类中定义了结果，当我这样做时，我可以访问结果中的元素并将它们打印到屏幕上

编辑：这是服务文件中的my getGames（）函数

  getGames():Observable<TheGames[]>{
    return this.http.get<theGames[]>(this.pathGames);   
  }

---

请把你的班级改为

export class TheGames { 
    count: number;
    next: string;
    previous: string;
    results: {
        game_id: number;
        title: string;
    }[];
}

除此之外，您还可以异步分配

this.game

。创建组件时，

在回调运行之前，此.game

是未定义的。因此，您需要处理此挂起状态

一种可能是添加save navigation操作符

<div *ngFor="let g of game?.results">
   <!-- SOMETHING HERE -->
</div>

---

您可以使用

？

来解决错误。角度安全导航操作符

？

可以防止属性路径中出现空值和未定义值

<div *ngFor="let g of game?.results">
   <!-- SOMETHING HERE -->
</div>

---

下面是一个正在工作的

使用异步管道。像这样：

组件技术

 game: this.gameandcatservice.getGames().pipe(
     take(1)
 )

Component.html

<div *ngFor="let g of (game | async)?.results">
   <!-- SOMETHING HERE -->
</div>

---

这将给你额外的好处，如果你需要的话，你不必取消订阅你的observable，你也不必初始化你的变量，也不必键入它（它将从你的服务上的

getGames

推断它的类型。）

我已经尝试过了，但仍然会遇到同样的错误console@Michael同时发布您的服务功能

getGames（）

here@JoelLoseph我已将我的console.log和getGames函数发布在我的question@Michael你的类名有输入错误，请参阅我的更新答案demo@Michael你查过我的回答了吗，对于模型，人们通常使用类而不是接口吗？为什么？似乎没有必要，它只是将代码添加到已编译的javascript中，没有任何额外的好处。我在Angular是一个新的程序员，所以我真的不明白如何处理您所说的内容：/您能更详细地解释一下吗？我扩展了我的答案