添加构造函数时，Angular Component 不呈现 html

Question

在我的一个组件中，我显示了从我创建的服务中获取的数据，该服务使用 http 通过 api 从外部网站获取数据。

在添加服务之前，组件运行良好(组件只显示静态 html)。现在，为了使用服务，我需要将服务注入(inject)到组件中，所以一旦我将它注入(inject)到构造函数中，它就不再显示静态 html，以及 - 这确实是有线的 - 路由器也不会'不工作。不会路由到这个组件，地址栏会显示最新组件的链接(最新访问的链接)

这是组件:

import { Component, OnInit } from '@angular/core';
import { DataDisplayFromAPI } from '../data-display-from-api.service';

@Component({
  selector: 'main-view',
  templateUrl: './main-view.component.html',
  styleUrls: ['./main-view.component.css']
})

export class MainViewComponent implements OnInit {

objectKeys = Object.keys;
cryptos: any;

constructor (private coinsRateCryptoCompare: DataDisplayFromAPI) {}

title = 'Digital Coin Hub';

ngOnInit () {
    this.coinsRateCryptoCompare.getPrices()
        .subscribe(res => {
            this.cryptos = res;
        });
}

}

现在，如果我只从组件 private coinsRateCryptoCompare: DataDisplayFromAPI 中取出私有(private)参数，该组件再次显示正确的静态 html:

constructor () {}

title = 'Digital Coin Hub';

ngOnInit () {
    //this.coinsRateCryptoCompare.getPrices()
        //.subscribe(res => {
        //  this.cryptos = res;
    //  });
}

}

但是显然我不能使用 http 数据

有什么问题？

根据评论，这是应用程序模块和服务。

服务:

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

import 'rxjs/add/operator/map';

@Injectable()

export class DataDisplayFromAPI {

   result:any;

   constructor(private _http: HttpClient) {}

   getPrices() {
      return this._http.get("https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD")
       .map(result => this.result = result);
   }
 }

应用模块:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http'; // import the     HTTP library to make our API calls

import { AppRoutingModule } from './app-routing.module';

import { DigitalCoinHubService } from './digital-coin-hub.service';
import { DataDisplayFromAPI } from './data-display-from-api.service';

import { AppComponent } from './app.component';
import { MainViewComponent } from './main-view/main-view.component';
import { BuySellBitcoinComponent } from './buy-sell/buy-sell.component';
import { DigitalWalletComponent } from './digital-wallet/digital-   wallet.component';
import { JobsComponent } from './jobs/jobs.component';
import { DigitalCoinsComponent } from './digital-coins/digital-   coins.component';
import { MiningComponent } from './mining/mining.component';
import { StartupsComponent } from './startups/startups.component';
import { EthereumComponent } from './ethereum/ethereum.component';
import { NewsComponent } from './news/news.component';
import { BuyWithDigitalCoinComponent } from './buy-with/buy-   with.component';
import { BannerWideComponent } from './banner-wide/banner-  wide.component';

 @NgModule({
     declarations: [
     AppComponent,
     MainViewComponent,
     BuySellBitcoinComponent, 
     DigitalWalletComponent,
     JobsComponent,
     DigitalCoinsComponent,
     MiningComponent,
     StartupsComponent,
     EthereumComponent,
     NewsComponent, 
     BuyWithDigitalCoinComponent, 
     BannerWideComponent
   ],
 imports: [
   BrowserModule,
   AppRoutingModule,
 ],
providers: [DigitalCoinHubService, DataDisplayFromAPI],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

我将 HttpClientModule 添加到 @NgModule 导入中，它解决了问题:

imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,

感谢您的帮助。问题解决了。