Question

在对Firebase进行POST后，我从Firebase返回了

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

如何使用Typescript读取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进行GET后，我从Firebase返回了

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

我应该为Firebase返回的英雄JSON创建一个界面吗？

如果问题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 }

如果问题2为是，我如何使用Typescript将JSON对象解析为接口？我们非常感谢代码示例。

目标是向用户显示英雄详情，并允许用户向英雄添加更多详细信息，例如出生日期，性别等...然后使用这些更改更新Firebase。 /强>

Answer 1

1。见下文。

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

3。根据您的示例JSON，我将如何构建返回类型的界面：

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

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

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

使用Angular2中的Typescript读取JSON

1 个答案: