Различия в наблюдаемых между Angular2 и Angular8 - PullRequest
Новая
       39

Различия в наблюдаемых между Angular2 и Angular8

1 голос
/ 07 ноября 2019

Я создал несколько функций, связанных с Observables в Angular2 для приложения, которое я разрабатывал. Но с тех пор я не использую Angular. Итак, мои рабочие функции, связанные с Observables, должны быть изменены соответствующим образом, чтобы стать функциональными в Angular8, и я не могу избавиться от некоторых сообщений об ошибках.

API с сервера возвращает массив объектов из базы данных: 

router.get('/getEntries, (req, res, next) => {
   db.get().collection('data').find().toArray((err, data) => { res.json(data); });
});

Возможно, проблема в entry.service.ts file: 

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {map}        from 'rxjs/operators';
import {Entry}      from '../Classes/entry';

@Injectable()
export class EntryService {

   constructor(private http: HttpClient) { }

   getEntries(): Observable<Entry[]> {
      return this.http.get('http://192.168.1.3:3000/api/getEntries').pipe(map(res => res.json() as Entry[]));
   }

} //end of Service

app.component.ts выглядит следующим образом: 

import {Component, OnInit} from '@angular/core';
import {Entry}             from '../Classes/entry';
import {EntryService}      from '../Services/entry.service';

@Component({
   selector    : 'app-root',
   templateUrl : './app.component.html',
   styleUrls   : ['./app.component.css']
})

export class AppComponent implements OnInit {
   entries: Entry[];

   constructor(private entryService: EntryService) { }

   ngOnInit(): void {
      this.entryService.getEntries().subscribe(data => {this.entries=data;}, err => {console.log(err);});
   }

} //end of Component

Старая рабочая entry.service.ts *Файл 1019 * в Angular2 выглядит следующим образом: 

import { Injectable }           from '@angular/core';
import { Http }                 from '@angular/http';
import { Observable }           from 'rxjs/Observable';
import { Entry }                from '../Classes/entry';
import 'rxjs/add/operator/map';

@Injectable()
export class EntryService {

   constructor(private http: Http) { }

   getEntries(): Observable<Entry[]> {
      return this.http.get('http://192.168.1.3:3000/api/getEntries').map(res => res.json() as Entry[]);
   }

} //end of Service

Теперь в Angular 8 функция .json () больше не существует. Как я могу настроить свой код в Angular 8, чтобы он работал?

Вообще говоря, является ли мой метод обработки http-запросов хорошей практикой или его можно реализовать лучше? Я не знаю Angular, поэтому я спрашиваю.

Заранее спасибо за потраченное время!

Ответы [ 2 ]

0 голосов
/ 07 ноября 2019

Используйте класс HttpClient из HttpClientModule, если вы используете Angular 4.3.x и выше:

import {HttpClientModule} из '@ angular / common / http'; 

 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

 class MyService() {
    constructor(http: HttpClient) {...}

Это обновленная версия http из модуля @ angular / http со следующими улучшениями:

  • Перехватчики позволяют вставлять логику промежуточного программного обеспечения в конвейер
  • Неизменный запрос / ответобъекты
  • События выполнения для загрузки запроса и загрузки ответа
  • JSON является предполагаемым значением по умолчанию и больше не нуждается в явном разборе
  • Типизированный доступ к телу синхронного ответа, включая поддержкудля типов тела JSON

Вы можете прочитать о том, как это работает здесь .

Также обратите внимание, что старый http был введен с использованием токена класса Http вместоновый HttpClient


@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...

 class MyService() {
    constructor(http: Http) {...}
0 голосов
/ 07 ноября 2019

HttpClient.get() применяется res.json() автоматически и возвращает наблюдаемый>. Вам больше не нужно вызывать эту функцию самостоятельно.

См. Разница между HTTP и HTTPClient в угловых 4?

Не нужно использовать этот метод: 

.map((res: Response) => res.json());
...