Httpclient 无法在本地或服务器上读取 json

Question

我正在使用 Angular 7 中内置的 HttpClient 模块从服务器读取 JSON。使用 HttpClient 时，它总是返回

错误类型错误：无法读取未定义的属性“get” 在 push../src/app/info/info.component.ts.info.getVars (info.component.ts:37) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) 在 Object.onInvokeTask (core.js:17290) 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422) 在 Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195) 在 push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498) 在 ZoneTask.invoke (zone.js:487) 在计时器（zone.js:2281）

我认为这意味着 JSON 无法找到/或为空白。

我尝试从服务器读取 JSON（没有成功），我已将 JSON 放入 assets 文件夹中以读取它，但我得到了同样的错误。我知道它应该在资产文件夹中工作，因为我可以毫无问题地从资产文件夹中导入它：
import infoJson from '../../assets/info.json

这是我目前尝试过的：(.component.ts)

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

export class VehicleinfoComponent implements OnInit {
    constructor(private httpService: HttpClient ) { }

    getVars() {
        this.httpService.get('../../assets/info.json').subscribe(data => {
          console.log(data);
        })
      }
}

我也尝试过创建服务，但出现同样的错误：(.service.ts):

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

@Injectable({
  providedIn: 'root'
})
export class GetJsonService {

  constructor(private http: HttpClient) { }

  public getJsonInfo(): Observable<any> {
    return this.http.get('./assets/info.json')
  }
}

.component.ts：

import { GetJsonService } from '../get-json.service'

export class VehicleinfoComponent implements OnInit {
    constructor(private GetJson: GetJsonService) { }

    getVars() {
        this.GetJson.getJsonInfo().subscribe(data => {
          console.log(data);
        })
    }
}

我之所以要使用HttpClient，是因为 JSON 会自动更新新数据，我希望能够读取并显示它。

感谢任何帮助。

编辑
这是我尝试阅读的 JSON 示例：

{
    "playerdata": [
        {
            "USER_ID": "7a8f",
            "Status": 1,
            "Start_Time": "2016-12-21 09:41:57",
            "Finish_Time": "2016-12-21 09:43:17",
        }
    ]
}

另外，这是我的app.module.ts：

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

@NgModule({
  declarations: [
    //components declared
  ],
  imports: [
    HttpClientModule,
    //other imports here
  ],
  providers: [  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

this.httpService 这里httpService 是undefined 表示没有发生注入。

如果您声明了适当的提供程序，请仔细检查您的模块配置（如果定制，它可以工作）。

属性导入应如下所示：

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    HttpClientModule, // HERE
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}