Angular 8 读取/渲染 JSON 文件答案

【问题标题】：Angular 8 read/render JSON fileAngular 8 读取/渲染 JSON 文件
【发布时间】：2019-08-07 16:27:53
【问题描述】：

我有一个画廊，里面有图片、日期和一些描述。我将所有这些信息放在一个单独的文件中，并且在 Angular Bootstrap 轮播的帮助下，我希望在我的图库组件中有一个漂亮的图像轮播。

我在加载我的 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！

【问题讨论】：

标签： html json angular typescript

【解决方案1】：

尝试在 tsconfig.json 的 compilerOptions 部分将 resolveJsonModule 设置为 true。我相信这是解析 json 文件所必需的。

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#new---resolvejsonmodule

【讨论】：

是的，然后像这样导入...import { dataJSON } from './gallery-data.json;

【解决方案2】：

所以根据你的建议我想出了答案：

我是这样导入数组的，因为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() {}

}

图库输出符合预期！

【讨论】：