Угловой v6.1.10 |
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'; (при условии, что он был установлен).
Когда я запустил его, я увидел пустую страницу с:
Не удается получить /
Немедленно приступили к установке отсутствующего модуля:
npm install --save rxjs-compat
Исправлена уязвимость:
npm audit fix
И при запуске приложения на терминале появляется следующая ошибка ():
ОШИБКА в node_modules / rxjs-compat / add / operator / map.d.ts (4,9): ошибка
TS2717: последующие объявления свойств должны иметь одинаковый тип.
Свойство 'map' должно иметь тип 'any', но здесь имеет тип '(это:
Наблюдаемый, проект: (значение: T, индекс: число) => R, thisArg ?: любой)
=> Наблюдаемый ... '.
Любая помощь приветствуется!
Услуги
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>;
}
Форма
рыба-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>