Javascript 在Angular 7中填充对象模型

***-嗨，伙计们，我已经有问题好几天了。我正在尝试填充 具有JSON API查询结果的对象。我需要填写 一个模型，因为通过它我需要锁定一个键来进行另一个查询 在另一个api中，返回屏幕上的数据。但到目前为止，我所做的一切 can-get是未定义的

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

---

导出类PokeApp实现OnInit{
第1代：第[]代；
第2代：第[]代；
世代：世代；
构造函数（私有http:HttpClient，私有gsservice:GenerationService）{
}
恩戈尼尼特（）{
这个.getGeneration1（）；
这个.getGeneration2（）；
//仅用于测试，这不是我需要的数据-但此对象生成返回null，我现在不知道如何返回。
this.gService.getPokemon_Species（this.generation.name）；
}
//此请求将一个gen1对象返回到我的屏幕，但在JS代码中需要此对象
//执行另一个查询。
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（“仍然返回未定义的”+“此.generation”）；
}
//这将执行对Poke API的请求
导出类生成服务{
私有GetGenerationURL1=”https://pokeapi.co/api/v2/generation/1";
私有GetGenerationURL2=”https://pokeapi.co/api/v2/generation/2";
httpOptions={headers:newhttpheaders（{“内容类型”：“application/json”}）；
构造函数（私有http:HttpClient）{}
getGeneration1（）：可观察{
返回this.http.get（this.GetGenerationURL1）
.烟斗(
点击（=>console.log（'fetched generations'）），
catchError（this.handleError（'getGeneration1'，[]））
);
//订阅以开始侦听异步结果
}
getGeneration2（）：可观察{
返回this.http.get（this.GetGenerationURL2）
.烟斗(
点击（=>console.log（'fetched generations'）），
catchError（this.handleError（'getGeneration2'，[]））
);
}
getPokemon_物种（url:string）：可观察{
log（“\uuu>>>${generation}”+url）；
返回此.http.get（url）
.烟斗(
点击（=>console.log（'fetched Species'）），
catchError（this.handleError（'getPokemon_Species'，[]））
);
}
私有句柄错误（操作='operation'，结果？：T）{
返回（错误：任意）：可观察=>{
//TODO:将错误发送到远程日志记录基础结构
console.error（error）；//改为登录到控制台
//TODO：更好地转换错误以供用户使用
console.log（`${operation}失败：${error.message}`）；
//通过返回空结果让应用程序继续运行。
返回（结果为T）；
};
}
}

更新

因此，问题实际上在于键入。您不需要在

生成之后的任何地方添加
[]
。因为没有任何地方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', []))
  );
}

在这种情况下，您仍然需要组件中的代码工作，而无需像我在旧答案中提供的那样链接响应，但我建议重构代码，如下所示：

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


旧答案

您需要使用。它应该是这样的：

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

欢迎来到异步世界，请阅读：并且您可能希望根据大小写使用
switchMap
、
mergeMap
或
forkJoin
链接您的请求。谢谢，但这不是我需要的。如果您查看我的代码，您将看到我可以在屏幕上大写对象的方式，你的链接对我帮助很大。重点是我需要用API响应填充模板。我可以用java轻松地完成这项工作。但这让我很头疼。我在这里感到困惑。到底是什么问题？你没有显示任何模板。我相信我不清楚我需要什么，所以我道歉。你可以完全忽略这个问题Generation2方法，因为我必须为这两种方法执行相同的过程。其思想是getGeneration1和2方法返回一个Generation对象，其中包含以下信息：能力：ArrayType；名称：string；id:number；主区域：ArrayType；移动：ArrayType；名称：ArrayType；pokemon_物种：ArrayType；类型：ArrayType；版本组：ArrayType；唉，通过这些数据，我查阅了口袋妖怪的种类。对不起，丹尼尔，我仍然不确定我是否理解这个问题。当返回一代时，你是否需要在下一个请求中显示它或使用它中的某些内容？我需要这样的内容：generation:generation；this.gService.getgenerationstion1（）.subscribe（response=>{this.gen1=response this.generation=this.gen1；//（但它是一个数组）//或this.generation=this.gen1[0]；//此返回Null console.log（“我需要此名称->”+this.generation.name）；//返回未定义。}）；此案例返回给我错误类型错误：无法读取未定义的属性“name”，因此问题在于0
response[0]的响应getGeneration1函数的
是未定义的，对吗？但据我所知，getGeneration1返回一个对象，那么为什么不能只将
this.generation=gen
设置为name属性呢？
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));
}