添加構造函數時，Angular Component無法呈現html

Question

在我的一個組件中，我顯示從我創建的服務中獲取的數據，該服務使用http通過api從外部網站獲取數據。

在添加服務之前，組件運行良好（該組件僅顯示靜態html）。 現在，為了使用該服務，我需要將該服務注入到組件中，因此，一旦將其注入到構造函數中，它就不再顯示靜態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 coinRateCryptoCompare：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,

謝謝你的幫助。 問題解決了。