我是 Angular/Typescript 的新手，我正在嘗試使用 Champion_info.json 構建一個動態頁面，以便在串列中顯示所有資料。我試圖從我的 json 檔案上傳資料，但我有這個錯誤，我不知道該怎么做。我觀看了關于這個主題的所有可能的 youtube 視頻，但我仍然找不到答案。
我怎樣才能簡單地從 .json 檔案中加載我的資料并使用它來在串列中顯示它？
這是我的 hero.component.ts ：
import { Component, OnInit } from '@angular/core';
import * as Heroes from "src/hero_json/champion_info.json";
interface heroes1 {
title: String;
id: Number;
name: String;
key:String;
}
@Component({
selector: 'app-hero',
templateUrl: './hero.component.html',
styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {
liste !: heroes1 = Heroes;
constructor() {
}
ngOnInit(): void {
}
}
這是錯誤
您可以在這里找到 Champion_info.json 檔案：https ://www.kaggle.com/datasnaek/league-of-legends?select=champion_info.json
uj5u.com熱心網友回復：
可能問題是您需要添加
declare module "*.json" {
const value: any;
export default value;
}
在應用程式檔案夾中的檔案中
json-typings.d.ts
無論如何，這里是我創建的回購協議，用基本和完整的方式來回答你的問題來構建這個應用程式，你可以克隆一個嘗試給你
報告基本應用
uj5u.com熱心網友回復：
首先，正如您在上面指出的，您需要.data在組件類中從 JSON 物件獲取：
heroes = json_data.data;
在您的模板中，使用角度keyvalue管道來決議和顯示具有物件串列而不是陣列的資料。
<div *ngFor="let hero of heroes | keyvalue">
{{ hero.value.title }}
{{ hero.value.name }}
// etc
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/427225.html