Question

我有一个数据，我必须将该数据读取为html并显示值。我尝试了通过API调用JSON的方法，但无法做到。请看一下我的代码演示。

有没有什么方法可以在不调用API的情况下使用此数据，我使用了JSON文件，因为我不希望该文件太长。

HTML：

 <div>
    <select >
            <option value=''>select</option>
            <option *ngFor="let country of countryList" [value]="country.dial_code">{{country.name | slice:0:20 }}
              {{country.dial_code}}</option>
          </select>
          <div>

Answer 1

您还可以从.json文件导入所有数据：

import * as data from './file.json';

然后将其用作data变量。

Answer 2

尝试以下操作：

export class AppComponent  {

   constructor(private http: HttpClient) {
        this.getCountryList().subscribe(data => {
            this.countryList=data;
        });
    }

    public getCountryList():Observable<any> {
        return this.http.get("./assets/countrylist.json")
    }

}

应将Http更改为HttpClient。
您的JSON文件应位于assets文件夹中。

如何通过Http更改HttpClient？

 import { HttpClient } from '@angular/common/http';

代替：

 import { Http } from '@angular/http';

然后：

import { HttpClientModule } from '@angular/common/http';

代替：

import { HttpModule } from '@angular/http';

Answer 3

如果在应用程序中包含数据，则无需进行Ajax调用。只需将其从json文件导入并公开

import allCountries from './countrylist.json'

，然后您的列表以allCountries的身份访问

  constructor(private http: Http
  ) {
    this.countryList=allCountries;
  }

https://stackblitz.com/edit/angular-45uaxp

如何使用angular2向客户端读取JSON

3 个答案: