在Angular2中使用类型记录读取JSON

Question

在发送到Firebase之后，我已经从Firebase返回了这个

{ "name": "-KBfn7iFNIxSuCL9B-g5" } 

1. 如何使用类型记录读取从POST请求返回的响应？路由只需要值-KBfn7iFNIxSuCL9B-g5。我现有的不完整代码如下所示：

   addHeroGotoHeroDetail() {
     let heroId: string;
     this._firebaseService.postHero()
        .subscribe(response => {
          //do something to make the heroId = -KBfn7iFNIxSuCL9B-g5 
     });
     this._router.navigate(['hero-detail', {id: heroId}]);
   }

的目标是在主页中有一个按钮，用户可以点击它在Firebase中创建一个新的英雄Id，然后将其重定向到新创建的英雄详细信息页面，在那里他可以进行更多的详细更新。

同样，在完成了从Firebase获取之后，我从Firebase返回了这个

{ "-KBfn-cw7wpfxfGqbAs8": { "created": 1456728705596, "hero": "Hero 1", "...": "..."} }

1. 我应该为Firebase返回的英雄JSON创建一个接口吗？
2. 如果问题2是，界面应该是什么样子的？

export interface X {
  id: string; //id defined by Firebase e.g. -KBfn-cw7wpfxfGqbAs8 
  hero: string; //name of the hero e.g. Hero 1 
  created: number; // The time when the hero was created
}

1. 如果问题2是，我如何使用类型记录将JSON对象解析到接口？代码示例将非常感谢。

目标是向用户显示英雄的详细信息，并允许用户向英雄添加更多的细节，如出生日期、性别等。然后用这些更改更新Firebase。

Answer 1

1.见下文。

2.是的，您应该创建一个与Firebase返回类型相匹配的接口。

3.基于示例JSON的，我将这样构造返回类型的接口：

export interface FirebaseResponse {
    [id: string]: {
        created: number;
        hero: string;
    }
}

要将来自Firebase的响应解析为强类型的对象，请执行以下操作：

let firebaseResponse = <FirebaseResponse>JSON.parse(response);

然后，如果愿意的话，您可以只返回ID，方法如下：

// note: this is making some assumptions about your response type.
// You may need a more sophisticated way of returning the ID depending
// on the structure of the response - for example, if the object has
// more than one key.
return Object.keys(firebaseResponse)[0];