在 Angular 7 中填充对象模型

Question

我这几天一直有问题。我正在尝试使用对 JSON API 的查询结果填充对象。我需要填写一个模型，因为通过它我需要钉一个键来在另一个 api 中进行另一个查询并在屏幕上返回数据。但到目前为止我能得到的都是未定义的为了更好地理解我需要填充生成对象，以便通过它我可以填充另一个对象的数据并获取一个 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 APIexport 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', []))    );  }

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));

}