Передавать данные в дочерний компонент при нажатии на карту в родительском компоненте (карта имеет идентификатор имени изображения и дополнительную информацию) angular
Я хочу передавать данные при нажатии на карту (карта имеет изображения, идентификатор, имя и т. д.) от родительского (nfts) дочернему (основному) компоненту и отображать информацию в дочернем компоненте.
Я пытался использовать @Input(), но не получил значение дочернего компонента, а также пытался использовать EventEmitter, но не смог передать значение через переменная.emit(значение) или есть лучший способ добиться этого
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.info(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.info( this.nftId);
}
}
Я хочу получать данные в main.ts
стекблиз ссылка - https://github.com/HemanthGirimat/nft-cryptoPunk-клон
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно добавить метод реализации ngOnchanges внутри дочернего компонента
export class MainComponent implements OnInit,OnChanges{
@Input() nftId:any;
constructor() { }
ngOnInit(){
console.info( this.nftId);
}
ngOnChanges(change: SimpleChanges) {
if (change["nftId"]) {
console.info(change["nftId"]);
}
}
}
поэтому вам нужно передать родительский дочерний объект, используя ввод, а не только идентификатор.
Я делаю это @ nft.html. Я использую (click) = "getId(data.token_id,data.image_url,data.name)" and in nft.ts getId(id:any,img:string,name:string){ this.ItemClicked = id; this.ItemClicked = img; this.ItemClicked = имя; }`
Вы используете только 1 переменную ItemClicked не полный объект
Можете ли вы указать мне направление обряда, если это не слишком много, чтобы спросить?
Сначала объявите Object ItemClicked : any; getId(id:any,img:string,name:string){ this.ItemClicked.id = id; this.ItemClicked.img = img; this.ItemClicked.name = имя; }
Ваш ответ может быть улучшен с помощью дополнительной вспомогательной информации. Пожалуйста, редактировать, чтобы добавить дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Дополнительную информацию о том, как писать хорошие ответы, можно найти в справочном центре.
Сначала объявите объект
ItemClicked : any;
getId(id:any,img:string,name:string){
this.ItemClicked.id = id;
this.ItemClicked.img = img;
this.ItemClicked.name = name;
}
хорошо, я передал его как объект, и я получаю данные как объект. Но я так и не понял, как его отображать и динамически обновлять каждый раз, когда я нажимаю на nft-карту. Извините за беспокойство. Я застрял в этом надолго и не могу найти какой-либо ресурс, если у вас есть пример, пожалуйста, дайте мне взглянуть Взгляните связь
можешь сделать стекблиц.
[стекблиз] - (stackblitz.com/github/HemanthGirimat/nft-cryptoPunk-клон)
Я больше не вижу ваш ответ (надеюсь, вы не удалили комментарий), но я посмотрел, и он работал, но в консоли была ошибка (невозможно прочитать свойство undefined ), он работает в stackbliz, но не в браузере
В любом случае спасибо, что нашли время ответить на мой вопрос. С вашей помощью я выяснил ошибку, потому что я обращался к значениям еще до того, как был сделан вызов API, и решил ее с помощью nftId?.image_url. Спасибо, Рутвик Мания.
Это делает то, что я хотел сделать, спасибо за ответ, но это не динамически обновлять мои клики каждый раз. Чего я пытаюсь добиться, так это каждый раз, когда я нажимаю на карту nft, она должна обновлять значения, такие как изображение идентификатора и имя.