我是新的离子角框架,所以我有一个主页,里面是一个模态。主页包含从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;
}
1条答案
按热度按时间0md85ypi1#
在.ts文件中,将
this.results=json;
替换为this.results.push(json)
你能分享你的演示JSON文件吗?根据我的JSON文件,我们应该使用推送来插入数据。