Question

我一直在尝试将这些方法转换为此代码的最新Angular 6版本。我的后端将一个JSON文件发送到Angular应用程序，这个方法获取这个JSON文件并使其成为我可以读取它的HTML。但遗憾的是我不明白如何将此代码重构为Angular 6，因为您既不能同时使用.interval也不能.map。

getHeroes(): Observable<Hero[]> {
      return Observable
      .interval(5000)
      .flatMap(() => this.http.get(this.heroesUrl).map((data) => data.json()));
  }

Answer 1

您的代码看起来像这样：

import {interval, Observable} from 'rxjs';
import {flatMap, map} from 'rxjs/operators';

getHeroes(): Observable<Hero[]> {
  interval(500)
    .pipe(
      flatMap(() => this.http
        .get(this.heroesUrl)
        .pipe(map(data => data.json()))
      })
    );
}

这个想法很简单;所有Observable，Subject，..和创建可观察对象的方法都是直接从rxjs导入的。而且您不能仅仅在可观察对象上链接运算符，您需要使用pipe方法并将所有运算符放在那里。运算符从rxjs/operators

导入

Sidenote，正如您所做的data.json()我假设您仍在使用“旧”http方法，您应该开始使用httpClient.get代替https://angular.io/api/common/http/HttpClient）

此外，升级到Rxjs 6时，您可以安装一个实际上为您自动执行此操作的迁移脚本

Answer 2

我会做这样的事情：

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';

// mockup Hero type
export class Hero {
  constructor(public name: string, public job: string) {}
}

@Injectable()
export class HeroService {
  private heroesUrl = 'REMOTE_SERVER_URL';
  constructor(private http: HttpClient) {}
  getHeroes(): Observable<Hero[]> {
    return this.http.get(this.heroesUrl).pipe(map((data: Hero[]) => {
        console.log(data);

        // Do something here to cast data to Hero[] model if data is not so
        return data;
      }));
  }
}

具有后端读取的Angular 6代码转换

2 个答案: