如何在Angular11中读取JSON文件中的值？

Question

我想在我的Angular应用程序中从这个JSON文件中读取值，我该怎么做呢？(此JSON文件不在我的应用程序的文件夹中)。当我使用角度图表(Pie或LineChart...)时，我还有另一个问题。在两个组件中，它在一个组件中工作，而在另一个组件中不工作，请问有什么问题？

{
  "name": "Global Information",
  "numberOfRequests": {
    "total": 5,
    "ok": 0,
    "ko": 5
  },
  "minResponseTime": {
    "total": 144,
    "ok": 0,
    "ko": 144
  },
  "maxResponseTime": {
    "total": 146,
    "ok": 0,
    "ko": 146
  },
  "meanResponseTime": {
    "total": 145,
    "ok": 0,
    "ko": 145
  },
  "standardDeviation": {
    "total": 1,
    "ok": 0,
    "ko": 1
  },
  "percentiles1": {
    "total": 145,
    "ok": 0,
    "ko": 145
  },
  "percentiles2": {
    "total": 145,
    "ok": 0,
    "ko": 145
  },
  "percentiles3": {
    "total": 146,
    "ok": 0,
    "ko": 146
  },
  "percentiles4": {
    "total": 146,
    "ok": 0,
    "ko": 146
  },
  "group1": {
    "name": "t < 800 ms",
    "count": 0,
    "percentage": 0
  },
  "group2": {
    "name": "800 ms < t < 1200 ms",
    "count": 0,
    "percentage": 0
  },
  "group3": {
    "name": "t > 1200 ms",
    "count": 0,
    "percentage": 0
  },
  "group4": {
    "name": "failed",
    "count": 5,
    "percentage": 100
  },
  "meanNumberOfRequestsPerSecond": {
    "total": 5.0,
    "ok": 0,
    "ko": 5.0
  }
}

Answer 1

只需在您的tsconfig文件中添加"resolveJsonModule":true：

    /* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "declaration": false,
    "noImplicitAny": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "strictPropertyInitialization": false,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "resolveJsonModule": true,
    "esModuleInterop": true
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictTemplates": true
    }
}

现在，您可以简单地将Json文件导入任何位置。

Import { data } from 'path/to/json/file.json'