Angular 8读取/渲染JSON文件
Angular 8读取/渲染JSON文件
提问于 2019-08-06 21:55:39
我有一个画廊，其中有图像，日期和一些描述。我在一个单独的文件中有所有的信息，在Angular Bootstrap carousel的帮助下，我想在我的图库组件中有一个很好的图像轮播。
我在加载我的JSON文件时遇到问题，我似乎没有正确地渲染它！任何意见都是非常感谢的！
在我的图库组件下面：
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';
import * as dataJSON from './gallery-data.json';
@Component({
selector: 'app-gallery',
templateUrl: './gallery.component.html',
styleUrls: ['./gallery.component.scss'],
encapsulation: ViewEncapsulation.None,
providers: [NgbCarouselConfig]
})
export class GalleryComponent implements OnInit {
images : any[] = [];
readJSON = dataJSON;
constructor(config: NgbCarouselConfig) {
//customize default values of carousels used by this component tree
config.interval = 10000;
config.wrap = false;
config.keyboard = true;
config.pauseOnHover = false;
this.images = this.readJSON.imgArray;
}
ngOnInit() {}
}<ngb-carousel *ngIf="images">
<ng-template ngbSlide *ngFor="let slide of images; index as i">
<div class="gallery_container">
<div class="gallery_img">
<figure>
<img [src]="slide.img" alt="Random first slide">
</figure>
</div>
<div class="gallery_description">
<div class="description_date">
{{slide.date}}
</div>
<div class="description_text">
{{slide.description}}
</div>
</div>
</div>
</ng-template>
</ngb-carousel>
和我的JSON文件：
{ "imgArray": [
{"img" : "assets/images/12.jpg", "date" : "August 18th, 2018", "description": "Lorem lorem"},
{"img" : "assets/images/7.jpg", "date" : "February 20th, 2018", "description": "Lorem lorem"},
{"img" : "assets/images/16.jpg", "date" : "August 20th, 2018", "description": "Lorem lorem"},
{"img" : "assets/images/15.jpg", "date" : "March 1st, 2017", "description": "Lorem lorem"},
{"img" : "assets/images/4.jpg", "date" : "August 20th, 2018", "description": "Lorem lorem"},
{"img" : "assets/images/12.jpg", "date" : "July 20th, 2019", "description": "Lorem lorem"},
{"img" : "assets/images/18.jpg", "date" : "August 14th, 2018", "description": "Lorem lorem"},
{"img" : "assets/images/13.jpg", "date" : "October 20th, 2019", "description": "Lorem lorem"}
]
}
我没有收到任何错误，但我认为我的JSON数据没有被加载！
我已经将resolveJsonModule设置为true！
回答 2
Stack Overflow用户
发布于 2019-08-06 22:23:13
尝试在tsconfig.json的compilerOptions部分中将resolveJsonModule设置为true。我认为这是解析json文件所必需的。
Stack Overflow用户
发布于 2019-08-07 16:27:53
所以根据你的建议，我想出了答案：
我按原样导入了数组，因为json文件中数组的名称是imgArray
import { imgArray } from './gallery-data.json';
我放入images数组中的数组
export class GalleryComponent implements OnInit {
images : any[] = [];
constructor(config: NgbCarouselConfig) {
//customize default values of carousels used by this component tree
config.interval = 10000;
config.wrap = false;
config.keyboard = true;
config.pauseOnHover = false;
this.images = imgArray;
}
ngOnInit() {}
}
画廊的输出和预期的一样！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57377727
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号