在Angular 9模板上显示本地JSON数据

Question

我想在我的HTML模板中显示以下JSON

[
  {
    "Name": "Get All Data",
    "Description": "Returns all data in the system. Warning: this request returns 8MB+ and takes 5+ seconds",
    "Path": "/all",
    "Params": null
  },
  {
    "Name": "Get List Of Countries",
    "Description": "Returns all countries and associated provinces. The country_slug variable is used for country specific data",
    "Path": "/countries",
    "Params": null
  },
  {
    "Name": "Get List Of Cases Per Country Per Province By Case Type",
    "Description": "Returns all cases by case type for a country. Country must be the country_slug from /countries. Cases must be one of: confirmed, recovered, deaths",
    "Path": "/country/{country}/status/{status}",
    "Params": [
      "country",
      "status"
    ]
  },
  {
    "Name": "Get List Of Cases Per Country Per Province By Case Type With Live Count",
    "Description": "Returns all cases by case type for a country with the latest record being the live count. Country must be the country_slug from /countries. Cases must be one of: confirmed, recovered, deaths",
    "Path": "/country/{country}/status/{status}/live",
    "Params": [
      "country",
      "status"
    ]
  },
  {
    "Name": "Get List Of Cases Per Country By Case Type",
    "Description": "Returns all cases by case type for a country. Country must be the country_slug from /countries. Cases must be one of: confirmed, recovered, deaths",
    "Path": "/total/country/{country}/status/{status}",
    "Params": [
      "country",
      "status"
    ]
  },
  {
    "Name": "Get List Of Cases Per Country Per Province By Case Type From The First Recorded Case",
    "Description": "Returns all cases by case type for a country from the first recorded case. Country must be the country_slug from /countries. Cases must be one of: confirmed, recovered, deaths",
    "Path": "/dayone/country/{country}/status/{status}",
    "Params": [
      "country",
      "status"
    ]
  },
  {
    "Name": "Get List Of Cases Per Country By Case Type From The First Recorded Case",
    "Description": "Returns all cases by case type for a country from the first recorded case. Country must be the country_slug from /countries. Cases must be one of: confirmed, recovered, deaths",
    "Path": "/total/dayone/country/{country}/status/{status}",
    "Params": [
      "country",
      "status"
    ]
  },
  {
    "Name": "Get List Of Cases Per Country Per Province By Case Type From The First Recorded Case With Live Count",
    "Description": "Returns all cases by case type for a country from the first recorded case with the latest record being the live count. Country must be the country_slug from /countries. Cases must be one of: confirmed, recovered, deaths",
    "Path": "/dayone/country/{country}/status/{status}/live",
    "Params": [
      "country",
      "status"
    ]
  },
  {
    "Name": "Get Live List Of Cases Per Country Per Province By Case Type",
    "Description": "Returns all live cases by case type for a country. These records are pulled every 10 minutes and are ungrouped. Country must be the country_slug from /countries. Cases must be one of: confirmed, recovered, deaths",
    "Path": "/live/country/{country}/status/{status}",
    "Params": [
      "country",
      "status"
    ]
  },
  {
    "Name": "Get Live List Of Cases Per Country Per Province By Case Type After A Date",
    "Description": "Returns all live cases by case type for a country after a given date. These records are pulled every 10 minutes and are ungrouped. Country must be the country_slug from /countries. Cases must be one of: confirmed, recovered, deaths",
    "Path": "/live/country/{country}/status/{status}/date/{date}",
    "Params": [
      "country",
      "status",
      "date"
    ]
  },
  {
    "Name": "Add a webhook to be notified when new data becomes available",
    "Description": "POST Request must be in JSON format with key URL and the value of the webhook. Response data is the same as returned from /summary",
    "Path": "/webhook",
    "Params": [
      "URL",
      "webhook"
    ]
  },
  {
    "Name": "Summary of new and total cases per country",
    "Description": "A summary of new and total cases per country",
    "Path": "/summary",
    "Params": null
  }
]

Answer 1

将json保存在一个变量中，并将变量保存在.ts文件中。

json: any = [{
    "Name": "Get All Data",
  }]

在html文件上：

<div *ngFor="let jsn of json">
{{ jsn.Name }}

​

Answer 2

您可以将其添加到JSON文件中，并将其放在一个公共属性中，比如data。然后使用插值，你可以呈现这个HTML。

{{data[0].Name}}

要从json文件中获取数据，可以使用http：

const httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json",
    Accept: "application/json"
  })
};

this.http.get("/assets/data.json", httpOptions).subscribe(
  (response: Olyimpics[]) => {
    this.rowData = response;
    this.gridApi.setPinnedBottomRowData(this.pinnedBottomRowData);
  },
  error => {
    console.log("Http error: ", error);
  }
);

您已经在构造函数中注入了HttpClient：

constructor(private http: HttpClient) {}

此外，要显示整个数据，您需要使用*ngFor指令。

希望这能有所帮助。

Answer 3

只需使用像{{data | json}}一样简单的json管道