Question

我正在尝试从JSON检索数据并将其显示在我的angular应用程序中。但它什么也没有，我不知道为什么。

这是我的JSON URL，例如example.com/api/v1/show/1

{
    "login_in": 1,
    "status": "ok"
}

这里是我的config.service.ts

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

import { Observable, throwError } from 'rxjs';

export interface Config {
  status: string;
}

@Injectable()
export class ConfigService {
  configUrl = 'example.com/api/v1/show/1';

  constructor(private http: HttpClient) { }

  getConfig() {
    return this.http.get(this.configUrl);
  }
}

这里是我的app.components.ts

import { Component } from '@angular/core';
import { Config, ConfigService } from './config/config.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [ ConfigService ],
})

export class AppComponent {
  config: Config;

  constructor(private configService: ConfigService) {}

  showConfig() {
    this.configService.getConfig()
      .subscribe((data: Config) => this.config = {
          status: data['status'],
      });
  }
}

还有我的app.components.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <p>Textfile URL is "{{config.status}}"</p>

在我的cmd上

 ℹ ｢wdm｣: Compiled successfully.

但结果

Textfile URL is "

没有显示我的status，我错过了什么？...

Answer 1

在调用showConfig（）方法的任何地方都看不到。

尝试一下：

   ngOnInit() {
    this.showConfig();
   }

    showConfig() {
        this.configService.getConfig()
          .subscribe((data: Config) => {
              this.config = data;
          });
     }

角度，未使用HttpClient加载数据

1 个答案: