StaticInjectorError - 填充下拉列表答案

【问题标题】：StaticInjectorError - Populating drop-down listsStaticInjectorError - 填充下拉列表
【发布时间】：2019-06-13 00:09:49
【问题描述】：

Angular v6.1.10 | ASP.Net Core v2.2.102

我正在尝试从我的 API 中提取数据以填充我的 Angular 应用程序上的下拉列表。

我在控制台上收到以下错误和警告：

警告

WebSocket 连接到 'ws://localhost:5000/sockjs-node/050/xwusnroj/websocket' 失败： WebSocket 在连接建立之前关闭。 WebSocketTransport.close@sockjs.js:2998

错误

ERROR 错误：未捕获（承诺）：错误： StaticInjectorError(AppModule)[PortoService -> Http]:
StaticInjectorError(Platform: core)[PortoService -> Http]: NullInjectorError: 没有 Http 提供者！

如下图所示：

运行 Karma 调试器时，我得到以下规格列表：

CounterComponent 应该显示一个标题应该从 count 0 开始，然后在单击 FishFormComponent 时增加 1 应该创建应该创建 PortoService

我不确定为什么会出现这些错误。任何帮助表示赞赏！

服务

porto.services.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PortoService {

  constructor(private http: Http) { }

  getPortos() {
    return this.http.get('/api/portos')
      .map(res => res.json());
  }
}

应用

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';
import { FishFormComponent } from './fish-form/fish-form.component';
import { PortoService } from './services/porto.service';

@NgModule({
  declarations: [
    AppComponent,
    NavMenuComponent,
    HomeComponent,
    CounterComponent,
    FetchDataComponent,
    FishFormComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot([
      { path: '', component: HomeComponent, pathMatch: 'full' },
      {path: 'fishes/new', component: FishFormComponent},
      { path: 'counter', component: CounterComponent },
      { path: 'fetch-data', component: FetchDataComponent },
    ])
  ],
  providers: [
    { provide: 'ORIGIN_URL', useValue: location.origin },
    PortoService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

表格

fish-form.components.ts

import { PortoService } from './../services/porto.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-fish-form',
  templateUrl: './fish-form.component.html',
  styleUrls: ['./fish-form.component.css']
})
export class FishFormComponent implements OnInit {
  portos;

  constructor(private PortoService: PortoService) { }

  ngOnInit() {
    this.PortoService.getPortos().subscribe(portos => {
      this.portos = portos;
      console.log("PORTOS", this.portos);
    });
  }

}

fish-form.component.ts

<h1>Adiciona um Peixe Novo</h1>
<form>
  <div class="form-group">
    <label for="porto">Porto</label>
    <select id="porto" class="form-control">
      <option value=""></option>
      <option *ngFor="let p of portos" value="{{ p.id }}">{{ p.nome }}</option>
    </select>
  </div>
  <div class="form-group">
    <label for="especie">Especie</label>
    <select id="especie" class="form-control"></select>
  </div>
</form>

【问题讨论】：

不应该在 porto.services.ts 中使用 import { HttpClient } from '@angular/common/http'; 来表示 Angular 6？
HttpClient 不是捆绑在 HttpClientModule 中的 Angular 服务？
我在问你为什么在 porto.services.ts 中导入import { Http } from '@angular/http'; 而不是使用import { HttpClient } from '@angular/common/http'
我在考虑以前的 Angular 版本。感谢 ABOS
@angular/http 已弃用。详情请见official docs。

标签： angular api asp.net-core drop-down-menu angular6

【解决方案1】：

通过将porto.services.ts 中的导入更新为@ABOS 建议的方式解决：

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

变化：

constructor(private http: Http)

到

constructor(private http: HttpClient)

由于HttpClient.get() 自动应用res.json() 并返回Observable<HttpResponse<string>>，我已经删除了.map(res => res.json());，因为不需要使用map 方法。

【讨论】：