代码之家  ›  专栏  ›  技术社区  ›  Gonçalo Peres

StaticInjectorError-填充下拉列表

  •  1
  • Gonçalo Peres  · 技术社区  · 5 年前

    角型V6.1.10_ASP.NET核心V2.2.102


    我正试图从我的API中提取数据来填充我的Angular应用程序的下拉列表。

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

    警告

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

    误差

    错误错误:未捕获(承诺中):错误: StaticInjectorError(AppModule)[端口服务->http]:
    StaticInjectorError(平台:核心)[portoseService->http]: NullInjectorError:没有HTTP提供程序!

    如下图所示:

    Warning and Error

    在运行Karma调试器时,我得到以下规范列表:

    反成分应显示标题应以计数0开头, 然后单击FishFormComponent时增量为1 应创建portoseservice

    enter image description here

    我不确定为什么会出现这些错误。感谢您的帮助!


    服务

    端口O.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.M.模块

    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 { }
    

    形式

    鱼形构件.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);
        });
      }
    
    }
    

    鱼形构件

    <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>
    
    1 回复  |  直到 5 年前
        1
  •  2
  •   Gonçalo Peres    5 年前

    通过将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方法。