以 angular 的形式将 ID 传递给子组件

Question

I have three components

A list component that does a request to receive an object, then a card component that is iterated for each object passed onto an array from the List component, lastly, I have a Detail component which im trying to pass an ID which is present in the object that is passed from the List component to the Card component.

I dont know how to pass this id.

List Component

this.webService.getObjects().subscribe((res : any) =>  {
      console.log(res) 
      this.cards = res.results  <-- An Array
      console.log(res.results)
      
    })

List Template:

<app-card class="col-md-4" *ngFor="let card of cards"
    [card]={card}></app-card> <-- object passed to Card Component

Card Component:

@Input() 
  game : any 

Card Template:

 <a href="javascript: void" [routerLink]="['',card.card.name]" class="btn btn-primary align-items-center">Detail</a>

How do I pass an ID that inside an object that is passed from the List Component into the Card Component?

Answer 1

我认为您正在卡片输入参数中传递 id，因此您可以使用 (?) 访问 html 中的卡片数据，以避免尝试访问无效引用。

 <a href="javascript: void" [routerLink]="['',card?.id]"   class="btn btn-primary align-items-center">Detail</a>