如何循环遍历单个JSON文件，使每个对象显示在Ionic tinder卡上？

因此，我下面将介绍如何为离子2构建点火卡。本教程使用了randomuser.me的API，但我想使用自己的JSON文件

下面是我的typescript文件（尽管我省略了一些不相关的代码片段），最底层的函数是我尝试检索自己的JSON数据所做的更改，但它工作不正常：（我认为我尝试在JSON文件中循环数组的方式有问题吗

导出类主页{
@ViewChild（'myswing1'）swingStack:SwingStackComponent；
@ViewChildren（“mycards1”）swingCards:QueryList；
卡片：阵列；
stackConfig:stackConfig；
recentCard:字符串=“”；
构造函数（公共http:http）{
this.stackConfig={
throwOutConfidence：（offsetX，offsetY，element）=>{
返回Math.min（Math.abs（offsetX）/（element.offsetWidth/2），1）；
},
变换：（元素，x，y，r）=>{
这是一个简单的元素（元素x，y，r）；
},
throwOutDistance：（d）=>{
返回800；
}
};
}
ngAfterViewInit（）{
this.swingStack.throwin.subscribe（（事件：DragEvent）=>{
event.target.style.background='#ffffff'；
});
this.cards=[{电子邮件：'}]；
这是新卡（1）；
}
voteUp（类似：布尔值）{
让removedCard=this.cards.pop（）；
这是新卡（1）；
如果（像）{
this.recentCard='您喜欢：'+removedCard.email；
}否则{
this.recentCard='您不喜欢：'+removedCard.email；
}
}
添加新卡（计数：数字）{
this.http.get（'../../assets/data/pics.json'）.map（data=>data.json（）.results）.subscribe（result=>{
for（让val计算结果）{
对于（var count=count；count，在对代码进行必要的更改之前，您应该确保了解一段代码实际上在做什么

以下是用于添加新卡的代码：

addNewCards(count: number){
    this.http.get('https://randomuser.me/api/?results=' + count).map(data => data.json().results).subscribe(result => {
        for (let val of result){
            for (var count = count; count<pic.length; count++){
                this.cards.push(val);
            }
        }
     })
}


因此，最终这将给我们留下：

addNewCards(count: number) {
    this.http.get('../../assets/data/pics.json')
    .map(data => data.json().pics)
    .subscribe(result => {
        for (let i = 0; i < count; i++) {
            this.cards.push(result[i]);
        }
    })
}

addNewCards（计数：数字）{
this.http.get（“../../assets/data/pics.json”）
.map（数据=>data.json（）.pics）
.订阅（结果=>{
for（设i=0；i

祝你好运，这里的主要教训是：在试图更改代码之前，先理解您正在使用的代码

看看我的，看看我是如何使用自己的JSON文件来填充条目列表的。
除了上面Rosco的答案修复了我的循环之外，它还提供了一个很好的解决方案，使JSON文件中的每个对象都出现在每张卡上。
HTML文件中的卡堆栈div和离子卡应该像这样附加（zIndex和marginTop属性在末尾被修改）：

区别在于使用了shift（）（而不是pop（）），因为这将从JSON文件的数组中删除第一个元素。就这样。谢谢Rosco和JB

注意：一旦你遍历了数组中的所有元素，它会再次返回到第一个元素；这是一个无休止的卡片循环
谢谢你的详细解释，我的JSON文件中的数据现在出现在卡片上！但是它仍然有问题；我刷的每一张卡片都只显示相同的对象。你认为我会有问题吗要彻底更改代码，使每个对象出现在我可以刷卡的每张卡上吗？好吧，当你用addNewCards（1）添加一张卡时，您总是在列表中添加第一张卡。如果您想发生其他事情，您必须更改循环。例如，如果您想从JSON文件中添加随机条目，您可以将
this.cards.push（result[i]）；
更改为
this.cards.push（result[Math.floor（Math.random（）*result.length）]；
addNewCards(count: number) {
    this.http.get('../../assets/data/pics.json')
    .map(data => data.json().pics)
    .subscribe(result => {
        for (let i = 0; i < count; i++) {
            this.cards.push(result[i]);
        }
    })
}

<div swing-stack #myswing1 [stackConfig]="stackConfig" (throwoutleft)="voteUp(true)" (throwoutright)="voteUp(false)" id="card-stack" [style.zIndex]="-1000">
<ion-card #mycards1 swing-card *ngFor="let c of cards; trackBy:trackByCards; let i=index;" [style.zIndex]="-1 * i" [style.marginTop]="i === 0 ? '0px' : '12px'">

let removedCard = this.cards.shift();