node.js - 使用 ASP.Net Core 应用程序在 Angular 上填充下拉列表时出现错误 TS2717
问题描述
角 v6.1.10 | ASP.Net Core v2.2.102 | Node.js v10.15.0
我在我的 Angular 和 ASP.Net Core 应用程序上填充下拉列表。
为此,我添加了一个组件,创建了一个路由和一个服务,现在我正在填充一个下拉列表。
在我添加.map(res => res.json());
的 porto.service.ts 中,getPortos()
但我没有安装 rxjs,即使我添加了导入import 'rxjs/add/operator/map';
(假设它已安装)。
当我运行它时,我看到一个空白页面:
不能获取 /
立即继续安装缺少的模块:
npm install --save rxjs-compat
修复了一个漏洞:
npm audit fix
在运行应用程序时,我在终端()上收到以下错误:
node_modules/rxjs-compat/add/operator/map.d.ts(4,9) 中的错误:错误 TS2717:后续属性声明必须具有相同的类型。属性 'map' 必须是 'any' 类型,但这里有类型 '(this: Observable, project: (value: T, index: number) => R, thisArg?: any) => Observable...'。
任何帮助表示赞赏!
服务
波尔图服务.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());
}
}
可观察的.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>;
}
形式
鱼-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);
});
}
}
鱼-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>
解决方案
如果您有 angular 6+,则需要像这样导入 RxJs 运算符
import { map } from 'rxjs/operators';
当您想要注入一些已经注入的依赖项时,就会出现此错误。但在这种情况下,我认为您的导入是错误的,但无论如何请检查您是否在其他地方提供了服务。
推荐阅读
- c - 在英文 ASCII 字符中转换十六进制数字
- react-native - 从导航堆栈中删除屏幕
- python - Kubeflow Pipeline - 存储(传递)TF.Dataset
- sql - TSQL 使用自定义值将表数据复制到另一个表
- google-cloud-vision - 谷歌视觉 API:java.lang.NoClassDefFoundError:com/google/cloud/vision/v1/ImageAnnotatorClient 错误
- php - 如何正确发送 POSTFIELDS 到 cURL
- ios - IOS:关于AudioQueue的问题
- python - Python中二维列表中的字符串
- vue.js - Rxjs 与 Axios Http 获取,请求完成后执行代码
- windows - 无法从 powershell 中删除文件,但可以从 GUI 中删除