Javascript 如何将API中的数据插入到ionic卡中？

这是我从API中得到的封面图片，现在我想把img url放在我的爱奥尼亚卡的img src中，然后我想让它对数组中的每个项目重复整个过程，如果有一个角度的快捷方式，请告诉我

这是我的js

var discover = new XMLHttpRequest();
// variables end
discover.open('GET','https://api.deezer.com/chart');
discover.onload = function(){
var discoverdata = JSON.parse(discover.responseText);
console.log(discoverdata.tracks.data[3].album.cover_medium)
};
discover.send();

这是我的HTML

<ion-slides id="discover">
          <ion-slide>
              <ion-card class="discover-card">
                  <img class="cover" src={} alt="">
                </ion-card>
          </ion-slide>

我希望它为每张卡应用不同的图像

JSON数据中的第一个对象

0: {…}
​​
album: {…}
​​​
cover: "https://api.deezer.com/album/100856872/image"
​​​
cover_big: "https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/500x500-000000-80-0-0.jpg"
​​​
cover_medium: "https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/250x250-000000-80-0-0.jpg"
​​​
cover_small: "https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/56x56-000000-80-0-0.jpg"
​​​
cover_xl: "https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/1000x1000-000000-80-0-0.jpg"
​​​
id: 100856872
​​​
title: "Señorita"
​​​
tracklist: "https://api.deezer.com/album/100856872/tracks"
​​​
type: "album"
​​​
<prototype>: Object { … }
​​
artist: Object { id: 5962948, name: "Shawn Mendes", link: "https://www.deezer.com/artist/5962948", … }
​​
duration: 190
​​
explicit_content_cover: 0
​​
explicit_content_lyrics: 0
​​
explicit_lyrics: false
​​
id: 698905582
​​
link: "https://www.deezer.com/track/698905582"
​​
position: 1
​​
preview: "https://cdns-preview-5.dzcdn.net/stream/c-58c2f2bd81ee0d60e70310831737a910-4.mp3"
​​
rank: 998970
​​
title: "Señorita"
​​
title_short: "Señorita"
​​
title_version: ""
​​
type: "track"

0:{…}
​​
相册：{…}
​​​
封面：“https://api.deezer.com/album/100856872/image"
​​​
盖上大盖子：https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/500x500-000000-80-0-0.jpg"
​​​
封面(中号):https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/250x250-000000-80-0-0.jpg"
​​​
盖小：https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/56x56-000000-80-0-0.jpg"
​​​
封面xl:“https://e-cdns-images.dzcdn.net/images/cover/4426e8a06d8d0cd96263094c6178bbf9/1000x1000-000000-80-0-0.jpg"
​​​
身份证号码：100856872
​​​
标题：“塞诺里塔”
​​​
轨迹列表：“https://api.deezer.com/album/100856872/tracks"
​​​
类型：“相册”
​​​
：对象{…}
​​
艺术家：对象{id:5962948，名称：“肖恩·门德斯”，链接：https://www.deezer.com/artist/5962948", … }
​​
持续时间：190
​​
明确的内容封面：0
​​
显式内容歌词：0
​​
歌词：假
​​
身份证号码：698905582
​​
链接：“https://www.deezer.com/track/698905582"
​​
职位：1
​​
预览：“https://cdns-preview-5.dzcdn.net/stream/c-58c2f2bd81ee0d60e70310831737a910-4.mp3"
​​
排名：998970
​​
标题：“塞诺里塔”
​​
标题(简称):"塞诺里塔"
​​
标题和版本：“
​​
类型：“轨道”

---

提前感谢：{）

如果您获得从json绑定到src标记的链接，如下所示：

<ion-card class="discover-card" *ngFor="let data of discoverdata.tracks.data;let index = index">
         <img class="cover" src={{data?.cover_medium}} alt="">
        <div>{{item?.title}}</div>
</ion-card>

{{item？.title}}

data.img

包含图像链接。

---

因此，如果您的图像链接位于discoverdata.tracks.data[3].album.cover\u medium中，请将其绑定到src。

注意：不要将*ngIf和*ngFor放在同一个javascript元素上

*ngFor迭代对象数组

…与javascript中的

for

相同

? checks for null or undefined values.

当Angular在project获得指定值之前渲染视图时，会导致异常。当project为null或未定义时，会停止计算，这通常发生在异步获取数据时，例如从服务器获取数据时，这可能需要相当长的时间

下次更改检测识别到更改时，将重新评估绑定。当project具有值时，它将绑定project.category

尝试：-

---

let数据=[你从api图像链接或图像@Nikhil Gangurde a中得到了什么link@Rishi不清楚！是否希望单个图像重复n次？@Rishi我希望它为每张卡应用不同的图像。这些图像将出现在哪里？随机？每个对象都有一个相册数组，其中包含封面图像链接。我的问题框错了，我还希望它重复在对数组中的所有项目执行相同的操作时，只需将上面的语句放入循环中，您介意我问ngFor做什么以及{{item.？.image}是什么吗在src中？对象中是否有图像键。图像在哪里？向您显示json…至少完整显示第一个对象。如果您的对象看起来像您发布的内容，并且有…“cover”键，则更新答案。这不是一个键，而是相册ID
? checks for null or undefined values.

    let data = [  <==== your data, save in variable data
    {
    "album ":[{
       "cover_image_link":""
     }
    ]
    }
    ]

    <ng-container *ngIf="data">    
       <ion-card class="discover-card" *ngFor="let item of data;let index = index">
                 <img class="cover" src={{item?.album[0].cover_image_link}} alt="">
                <div>{{item?.title}}</div>
        </ion-card>
    </ng-container>

or,

 <ng-container *ngIf="data">    
       <ion-card class="discover-card" *ngFor="let item of data;let index = index">
 <ng-container  *ngFor="let itemm of item?.album;let indexx = index">  
                 <img class="cover" src={{itemm?.cover_image_link}} alt="">
   </ng-container>
                <div>{{item?.title}}</div>
        </ion-card>
    </ng-container>