Ionic 如何根据离子Angular 中的选定项获取JSON特定数据?

vshtjzan  于 2022-12-08  发布在  Ionic
关注(0)|答案(1)|浏览(169)

我是新的离子角框架,所以我有一个主页,里面是一个模态。主页包含从json文件中获取的项目列表,当我点击一个特定的项目,我需要有这个项目的所有信息内的模态,但我不知道如何传递这些数据。任何帮助?

主页.页面.html

<h1 style="font-size:large; text-align: center; color:darkblue; padding:10px 10px 10px 10px ">Search for your fav Game!!</h1>
</ion-text>

<div style="display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; justify-content: center; ">
    <div style="justify-content: center;text-align: center; " *ngFor="let item of results ">
        <ion-card style="padding-bottom:10px;justify-content: center;">
            <ion-img src=" {{item.Thumbnail_Large}} " style="margin:20px;">
            </ion-img>
            <ion-text style="font-size:x-small; color:darkblue; font-weight: bold; ">{{item.Title}}</ion-text><br>
            <ion-text style="color: orange;font-size:large;margin-bottom: 20%; ">{{item.Rating}}</ion-text>
            <ion-modal [isOpen]="isModalOpen" *ngFor="let item of results ">
                <ng-template>
                    <ion-header>
                        <ion-toolbar>
                            <ion-title>Modal</ion-title>
                            <ion-buttons slot="end">
                                <ion-button (click)="setOpen(false)">Close</ion-button>
                            </ion-buttons>
                        </ion-toolbar>
                    </ion-header>
                    <ion-content class="ion-padding">
                    </ion-content>
                </ng-template>
            </ion-modal>
        </ion-card>
    </div>
</div>

主页.页面.ts

import { Component, OnInit } from ‘@angular/core’;

@Component({
    selector: ‘app-home’,
    templateUrl: ‘home.page.html’,
    styleUrls: [‘home.page.scss’]
});

export class HomePage implements OnInit {
    isModalOpen = false;
    results: any;

    constructor() {}

    ngOnInit(){
        fetch(‘./assets/inputFile/input.json’)
            .then(res => res.json())
            .then(json => {
                console.log(‘results::’,json);
                this.results=json;
            });
    }

    setOpen(isOpen: boolean) {
       this.isModalOpen = isOpen;
    }
0md85ypi

0md85ypi1#

在.ts文件中,将this.results=json;替换为this.results.push(json)
你能分享你的演示JSON文件吗?根据我的JSON文件,我们应该使用推送来插入数据。

相关问题