使用带有服务和接口的 Angular (v5) 获取或获取 API 数据？

Question

我正在使用 v 5 应用程序开发 Angular。我正在获取 API 并使用 https://angular.io/guide/http 文档。但我看不到任何东西。

如何解决文档提供的数据的这个问题？

我的文件夹结构：

https://imgur.com/A03KtDy

终端没有任何错误：

https://imgur.com/a/AEKxv

控制台没有问题：

https://imgur.com/JaPTvXZ

文件：app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { ConfigService } from './services/config.service';

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'dashboard', component: DashboardComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  providers: [ConfigService],
  bootstrap: [AppComponent]
})
export class AppModule { }

文件：config.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Config } from './config';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class ConfigService {

  constructor(private http: HttpClient) { }

  configUrl : 'http://localhost:3000/api/get';

  getConfig() {
    return this.http.get<Config>(this.configUrl)
    }
}

文件：dashboard.component.ts

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  constructor(private configService : ConfigService) { }

  ngOnInit() { }

  config: Config;

showConfig() {
  this.configService.getConfig()
    // clone the data object, using its known Config shape
    .subscribe(data => this.config = { ...data });
}
}

文件：dashboard.component.html

<ul class="list-group" *ngFor="let config of configs">
  <li class="list-group-item list-group-item-dark">{{config.name}}</li>
</ul>

文件：config.ts

export interface Config {
    name : string
}

Answer 1

我没有在您的代码中看到您调用 showConfig() 方法。

也许您忘记添加对 ngOnInit() 方法的调用？

 ngOnInit() { 
   this.showConfig();
}