javascript - 在 Angular 7 中填充对象模型

Question

*** - 大家好，我这几天一直遇到问题。我正在尝试填充 一个包含 JSON API 查询结果的对象。我需要填写 一个模型，因为通过它我需要确定一个键来进行另一个查询 在另一个 api 中返回屏幕上的数据。但到目前为止我 能得到的是undefined

为了更好地理解我需要填充生成对象，以便通过它我可以填充另一个对象的数据并获取一个 url 来查询另一个端点 api 并从屏幕返回其他数据。

---

export class PokeApp implements OnInit  {

   gen1: Generation[];
   gen2: Generation[];

    generation : Generation;

  constructor(private http: HttpClient, private gService:GenerationService) {

  }

  ngOnInit(){
   this.getGeneration1();
   this.getGeneration2();
   // Only for test, this is not the data ho i need - but this object generation returns null, i do not now how.
   this.gService.getPokemon_Species(this.generation.name);
  }

// this request return a gen1 object to my screen, but a need this object in JS code
// to do another query.
  getGeneration1(): void{
    this.gService.getGeneration1().subscribe(gen =>{

    this.gen1 = gen
    this.generation = gen[0];
  });

  }

  getGeneration2(): void{
    this.gService.getGeneration2().subscribe(gen => this.gen2 = gen);

    console.log("Still Returned Undefined___>>>>" + this.generation);
 }

// this do the request to a Poke API

export class GenerationService {
  private GetGenerationURL1 = "https://pokeapi.co/api/v2/generation/1";
  private GetGenerationURL2 = "https://pokeapi.co/api/v2/generation/2";

  httpOptions = { headers: new HttpHeaders({ "Content-Type": "application/json" }) };


  constructor(private http: HttpClient) { }

  getGeneration1(): Observable<Generation[]> {
    return this.http.get<Generation[]>(this.GetGenerationURL1)
      .pipe(
        tap(_ => console.log('fetched generations')),
        catchError(this.handleError<Generation[]>('getGeneration1', []))
      );
    // Subscribe to begin listening for async result
  }

  getGeneration2(): Observable<Generation[]> {
    return this.http.get<Generation[]>(this.GetGenerationURL2)
    .pipe(
      tap(_ => console.log('fetched generations')),
      catchError(this.handleError<Generation[]>('getGeneration2', []))
    );
  }

  getPokemon_Species(url: string): Observable<Pokemon[]> {
    console.log("___>>>>${generation}" + url);
    return this.http.get<Pokemon[]>(url)
      .pipe(
        tap(_ => console.log('fetched Species')),
        catchError(this.handleError<Pokemon[]>('getPokemon_Species', []))
      );
  }

  private handleError<T>(operation = 'operation', result?: T) {
    return (error: any): Observable<T> => {

      // TODO: send the error to remote logging infrastructure
      console.error(error); // log to console instead

      // TODO: better job of transforming error for user consumption
      console.log(`${operation} failed: ${error.message}`);

      // Let the app keep running by returning an empty result.
      return of(result as T);
    };
  }

}

Answer 1

更新

所以问题实际上出在打字上。您不需要在任何地方的 Generation 之后添加 []。因为 API 不会在任何地方响应世代数组。

因此，从 getGeneration1 的返回类型和服务中 HTTP 的类型化响应中删除 []。

请注意，Typescript 中的类型仅用于编译时，它不会影响运行时的任何内容，只是为了确保您使用正确的引用并在运行前检测错误。

我在这里添加 getGeneration 函数:

getGeneration1(): Observable<Generation> {
  return this.http.get<Generation>(this.GetGenerationURL1)
    .pipe(
      tap(_ => console.log('fetched generations')),
      catchError(this.handleError<Generation>('getGeneration1', []))
    );
}

getGeneration2(): Observable<Generation> {
  return this.http.get<Generation>(this.GetGenerationURL2)
  .pipe(
    tap(_ => console.log('fetched generations')),
    catchError(this.handleError<Generation>('getGeneration2', []))
  );
}

在组件中，您需要像这样重构它:

export class PokeApp implements OnInit  {

gen1: Generation;
gen2: Generation;
generation : Generation;

constructor(private http: HttpClient, private gService:GenerationService) {

}

ngOnInit(){
  this.getGeneration1();
  this.getGeneration2();
  this.gService.getPokemon_Species(this.generation.name);
}

getGeneration1(): void{
    this.gService.getGeneration1().subscribe(gen =>{
      this.gen1 = gen
      this.generation = gen;
  });

}

getGeneration2(): void{
    this.gService.getGeneration2().subscribe(gen => this.gen2 = gen);
}

这是为了防止您仍然需要组件中的代码来工作而不像我在旧答案中提供的那样链接响应，但我建议像这样重构您的代码:

getGenerations() {
  this.gService.getGeneration1()
    .pipe(mergeMap(gen => {
      this.generation = gen;
      return this.gService.getGeneration2();
    }))
    .pipe(mergeMap(gen => {
      return this.gService.getPokemon_Species(this.generation.name);
    }))
    .subscribe(response => console.log(response));
}

---

旧答案

你很需要使用 mergeMap .它应该是这样的:

getGenerations() {
  this.gService.getGeneration1()
    .pipe(mergeMap(gen => {
      this.gen1 = gen;
      this.generation = gen[0];
      return this.gService.getGeneration2();
    }))
    .pipe(mergeMap(gen => {
      this.gen2 = gen;
      return this.gService.getPokemon_Species(this.generation.name);
    }))
    .subscribe(response => console.log(response));
}