单击父组件中的卡片时将数据传递给子组件（卡片具有图像名称 ID 和更多信息）angular

Question

我想在单击卡片时将数据（卡片有图像、ID、名称等）从父组件（nfts）传递到子组件（主），并在子组件中呈现信息。

我尝试使用 @Input() 但我没有在子组件上获得值，也尝试使用 EventEmitter 但我无法通过 [=37= 传递值](值) 还是有更好的方法实现这个

nft.html

<app-main [nftId]="ItemClicked"></app-main>
<div class="container">
    <div class="collectionCard" *ngFor="let data of nftData" 
    (click)="getId(data.token_id,data.image_url,data.name)">
        <img src="{{data.image_url}}" alt="nf img" >
        <div class="details">
            <div class="name">
                {{data.name}} 
                <div class="id">#. {{data.token_id}}</div>
            </div>
        </div>
    
        <div class="priceContainer">
            <img src="assets/assets/weth.png" alt="symbol" class="weithImage">
            <div class="price">{{data.traits[0]?.value}}</div>
        </div>
    </div>
</div>

nft.ts

export class NftsComponent implements OnInit {
  nftData:any =[];
  ItemClicked:any = []; 
 
  getdata(){
    fetch('https://testnets-api.opensea.io/api/v1/assets?asset_contract_address=0x617d411DE5a4D5b668EBAa22Edc7bCdbb88285c4&order_direction=desc&offset=0&limit=5')
   .then(response =>response.json())
   .then(response =>{
     const data = response.assets;
     this.nftData = data;
     console.log(this.nftData);
   })
   .catch(err =>console.error(err))
  }

  getId(id:any,img:string,name:string){
    this.ItemClicked = id; 
    this.ItemClicked = img;
    this.ItemClicked = name;
  }
  
  constructor() { }

  ngOnInit(): void {
   this.getdata();
    
  }

main.ts

export class MainComponent implements OnInit {
  @Input() nftId:any;

  constructor() { }


  ngOnInit(){
    console.log( this.nftId);
  }
}

我想在main.ts

中接收数据

stackbliz link - https://github.com/HemanthGirimath/nft-cryptoPunk-clone

Answer 1

您需要在子组件中添加实现 ngOnchanges 方法

export class MainComponent implements OnInit,OnChanges{
  @Input() nftId:any;

  constructor() { }


  ngOnInit(){
    console.log( this.nftId);
  }

ngOnChanges(change: SimpleChanges) {
    if(change["nftId"]) {
      console.log(change["nftId"]);
    }
  }

}

Answer 2

首先声明对象

ItemClicked  : any;

getId(id:any,img:string,name:string){
    this.ItemClicked.id = id; 
    this.ItemClicked.img = img;
    this.ItemClicked.name = name;
  }

单击父组件中的卡片时将数据传递给子组件（卡片具有图像名称 ID 和更多信息）angular

pass data to child component when clicked on card in parent component ( card has image name id and more info ) angular

javascript

typescript

angular