Angular 将数据从服务传递到不使用 ngFor 的组件？

Question

你好，我正在使用 angular 制作视频游戏页面，当您单击特定标题时，它会发送 ID 以使用特定 ID 进行 api 调用。我可以将数据放入我想使用它的 selected-games 组件中，但是当我使用 ngFor 时，它什么也没显示。没有错误也没有数据。

主页组件，您可以在其中 select 特定的视频游戏。我在这个 ts 文件中添加了 settimeout 和路由，想着是否可以延迟路由直到 selected-game-component 中的数组加载，但它没有工作。

constructor( private getGame: SelectedGameComponent, private router: Router) { }

  ngOnInit(): void {
    
  }



  sendId(id: any){
  // this.gamesService.functionGetGameById(id);
     this.getGame.test(id);

     setTimeout( () => {
       this.router.navigateByUrl('game')
     }, 5000)
  }
}

selected 游戏组件，我试图在其中映射 html 文件中的数据

game: any = [];
constructor(private getGames: FetchingVideoGamesService) { }

 test(id: any){
    this.getGames.functionGetGameById(id).subscribe(response =>{
      this.game = response;
      console.log(this.game)
    })
  }
}

和获取服务

 functionGetGameById(id: any){
    return this.http.get<any>('https://api.rawg.io/api/games/'+id+'?key=keyremovedforpost'
      )
      .pipe(map(response =>{
        const gameArray: any = [];
        gameArray.push(response)
        console.log(gameArray, 'response from service')
        return gameArray[0]
      }))

  }

Answer 1

您正在将 child 组件注入到 parent 组件中...您不妨为此使用服务。

我建议采用以下方法，这是推荐的一种反应性方法，让 parent 从服务调用 functionGetGameById()，一旦 parent 取回数据，然后继续将其发送到他的 child.

parent

export class ParentComponent {
  games$!: Observable<any[]>;

  constructor(private getGames: FetchingVideoGamesService) { }
  
  callTheService(id: string): void {
    this.games$ = this.getGames.functionGetGameById(id);
  }
}

parent html

...
<your-child-component [theGames]="games$ | async">
</your-child-component>

child

...
export class ChildComponent {
  @Input() theGames!: any[];
}

child html

<div *ngFor="let game of theGames">
 {{ game }}
</div>

这样，您就可以在组件之间保持 one-way 通信（从上到下），parent 组件成为一个智能组件，它了解逻辑业务，而您的 child 组件成为一个哑组件，它只做一件非常具体的事情，仅此而已，如果 child 需要将一些数据发送回 parent，请使用 Ouput 事件发射器

Angular 将数据从服务传递到不使用 ngFor 的组件？

Angular passed data from service to component not working with ngFor?

typescript

angular