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参数 private coinsRateCryptoCompare：DataDisplayFromAPI ，该组件再次显示静态html：

constructor () {}

title = 'Digital Coin Hub';

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

}

但显然我不能使用http数据

有什么问题？

根据评论，这是app模块和服务。

服务：

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,

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

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

1 个答案: