node.js - 使用 ASP.Net Core 应用程序填充 Angular 上的下拉列表时出现错误 TS2717

Question

Angular v6.1.10 | ASP.Net Core v2.2.102 | ASP.NET Core v2.2.102 Node.js v10.15.0

<小时/>

我正在我的 Angular 和 ASP.Net Core 应用程序上填充下拉列表。

为此，我添加了一个组件，创建了一个路由和一个服务，现在我正在填充一个下拉列表。

在 porto.service.ts 中，我已将 .map(res => res.json()); 添加到 getPortos()，但我没有安装 rxjs，即使我添加了导入 import 'rxjs/add/operator/map'; (假设它已安装)。

当我运行它时，我看到一个空白页面:

Cannot GET /

立即继续安装缺少的模块:

npm install --save rxjs-compat

修复了一个漏洞:

npm audit fix

运行应用程序时，我在终端 () 上收到以下错误:

ERROR in node_modules/rxjs-compat/add/operator/map.d.ts(4,9): error TS2717: Subsequent property declarations must have the same type. Property 'map' must be of type 'any', but here has type '(this: Observable, project: (value: T, index: number) => R, thisArg?: any) => Observable...'.

感谢任何帮助!

<小时/>

服务

porto.service.ts

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

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

  constructor(private http: Http) { }

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

Observable.d.ts

import { Operator } from './Operator';
import { Subscriber } from './Subscriber';
import { Subscription } from './Subscription';
import { TeardownLogic, OperatorFunction, PartialObserver, Subscribable } from './types';
import { iif } from './observable/iif';
import { throwError } from './observable/throwError';
/**
 * A representation of any set of values over any amount of time. This is the most basic building block
 * of RxJS.
 *
 * @class Observable<T>
 */
export declare class Observable<T> implements Subscribable<T> {
    /** Internal implementation detail, do not use directly. */
    _isScalar: boolean;
    /** @deprecated This is an internal implementation detail, do not use. */
    source: Observable<any>;
    /** @deprecated This is an internal implementation detail, do not use. */
    operator: Operator<any, T>;
  map: any;
    /**
     * @constructor
     * @param {Function} subscribe the function that is called when the Observable is
     * initially subscribed to. This function is given a Subscriber, to which new values
     * can be `next`ed, or an `error` method can be called to raise an error, or
     * `complete` can be called to notify of a successful completion.
     */
    constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic);
    /**
     * Creates a new cold Observable by calling the Observable constructor
     * @static true
     * @owner Observable
     * @method create
     * @param {Function} subscribe? the subscriber function to be passed to the Observable constructor
     * @return {Observable} a new cold observable
     * @nocollapse
     */
    static create: Function;
    /**
     * Creates a new Observable, with this Observable as the source, and the passed
     * operator defined as the new observable's operator.
     * @method lift
     * @param {Operator} operator the operator defining the operation to take on the observable
     * @return {Observable} a new observable with the Operator applied
     */
    lift<R>(operator: Operator<T, R>): Observable<R>;
    subscribe(observer?: PartialObserver<T>): Subscription;
    subscribe(next?: (value: T) => void, error?: (error: any) => void, complete?: () => void): Subscription;
    /** @deprecated This is an internal implementation detail, do not use. */
    _trySubscribe(sink: Subscriber<T>): TeardownLogic;
    /**
     * @method forEach
     * @param {Function} next a handler for each value emitted by the observable
     * @param {PromiseConstructor} [promiseCtor] a constructor function used to instantiate the Promise
     * @return {Promise} a promise that either resolves on observable completion or
     *  rejects with the handled error
     */
    forEach(next: (value: T) => void, promiseCtor?: PromiseConstructorLike): Promise<void>;
    /** @deprecated This is an internal implementation detail, do not use. */
    _subscribe(subscriber: Subscriber<any>): TeardownLogic;
    /**
     * @nocollapse
     * @deprecated In favor of iif creation function: import { iif } from 'rxjs';
     */
    static if: typeof iif;
    /**
     * @nocollapse
     * @deprecated In favor of throwError creation function: import { throwError } from 'rxjs';
     */
    static throw: typeof throwError;
    pipe(): Observable<T>;
    pipe<A>(op1: OperatorFunction<T, A>): Observable<A>;
    pipe<A, B>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>): Observable<B>;
    pipe<A, B, C>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>): Observable<C>;
    pipe<A, B, C, D>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>): Observable<D>;
    pipe<A, B, C, D, E>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>): Observable<E>;
    pipe<A, B, C, D, E, F>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>): Observable<F>;
    pipe<A, B, C, D, E, F, G>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>, op7: OperatorFunction<F, G>): Observable<G>;
    pipe<A, B, C, D, E, F, G, H>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>, op7: OperatorFunction<F, G>, op8: OperatorFunction<G, H>): Observable<H>;
    pipe<A, B, C, D, E, F, G, H, I>(op1: OperatorFunction<T, A>, op2: OperatorFunction<A, B>, op3: OperatorFunction<B, C>, op4: OperatorFunction<C, D>, op5: OperatorFunction<D, E>, op6: OperatorFunction<E, F>, op7: OperatorFunction<F, G>, op8: OperatorFunction<G, H>, op9: OperatorFunction<H, I>): Observable<I>;
    pipe<R>(...operations: OperatorFunction<any, any>[]): Observable<R>;
    toPromise<T>(this: Observable<T>): Promise<T>;
    toPromise<T>(this: Observable<T>, PromiseCtor: typeof Promise): Promise<T>;
    toPromise<T>(this: Observable<T>, PromiseCtor: PromiseConstructorLike): Promise<T>;
}

<小时/>

表格

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.html

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

Answer 1

如果你有 Angular 6+，你需要像这样导入 RxJs 运算符

import { map } from 'rxjs/operators';

当您想要注入(inject)一些已经注入(inject)的依赖项时，就会出现此错误。但在这种情况下，我认为您的导入是错误的，但无论如何请检查您是否在其他地方提供了服务。