在 Angular2 中访问 Typescript 对象变量答案

【问题标题】：Access Typescript Object Variables in Angular2在 Angular2 中访问 Typescript 对象变量
【发布时间】：2016-07-28 16:14:15
【问题描述】：

如何显示下面 Hero 对象的 ID 和标题？下面的 Hero 接口是根据 Firebase JSON 响应映射的。

hero.component.ts

import {Component, Input} from 'angular2/core';
import {Hero} from '../model/hero';

@Component({
  selector: 'hero-component',
  template: `
                {{hero | json }} this works. This display the Firebase JSON response as seen below 
                <br>
                {{ Object.keys(hero)[0] }} this DOESN'T work
                <br> 
                {{ hero[Object.keys(hero)[0]].title }}this also DOESN'T work
  `
})

export class HeroComponent {
  @Input()
  hero:Hero;
}

hero.ts

export interface Hero {
  [id: string]: {
    createdAt: number;
    isActive: boolean;
    title: string;
    updatedAt: number;
  }
}

Firebase JSON 响应

{ "-KEMOfA5KFK98AXNhPY0": { "createdAt": 1459607745222, "isActive": true, "title": "Wind Hero", "updatedAt": 1459607745222 } }

【问题讨论】：

有一点需要注意，我没有使用 AngularFire2。我正在使用 Firebase REST API。我很难将 Angular2 与 Firebase REST API 一起使用，因为我不知道如何将 Firebase JSON 响应映射到 Typescript 接口以及如何访问变量。如果我使用 AngularFire2 会更容易吗？
为什么不使用服务中的 Firebase，并让服务转换响应并以更可用的格式返回？这会将控制器和视图代码与这些 firebase 问题隔离开来。
好主意。我对 Angular2 和 Firebase 不是很熟悉。所以我现在能做的就是关注我找到的任何截屏视频。 @JB Nizet 你会怎么做？你有这个建议的 Github repo 吗？
没有。我从未使用过 Firebase。但是你会做一些类似于in the doc 描述的使用 Http 的事情（在服务中，发出你的请求，并将响应数据转换为 JSON），除了这里，服务将调用 firebase，并将返回的 firebase 数组转换为一个更有用的对象。

标签： json typescript firebase angular

【解决方案1】：

更新

而不是pipes: [KeysPipe]

使用

@NgModule({
  declarations: [KeysPipe],
  exports: [KeysPipe],
}
export class SharedModule{}

@NgModule({
  ...
  imports: [SharedModule],
})

原创

您不能在模板中使用Object.keys(hero)[0]。不能使用全局引用，只能使用组件的成员。

改为在你的组件上创建一个函数

getKeys(obj) {
  return Object.keys(obj);
}

然后在模板中

{{ getKeys(hero)[0] }}

或者，您可以构建一个提取键的管道，例如 https://stackoverflow.com/a/34074484/217408

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
  transform(value: any, args: any[] = null): any {
    return Object.keys(value);
  }
}

然后像这样使用它

{{ (hero | keys)[0] }}

不要忘记将管道添加到您要使用它的组件上的pipes: [KeysPipe] 或替代

bootstrap(App, [provide(PLATFORM_PIPES, {useValue: KeysPipe, multi:true})]);

【讨论】：

建立一个提取密钥的管道？你能提供一个简短的例子吗？

【解决方案2】：

由于Object 在您的组件中不可用，您的代码无法正常工作。

你可以试试这样的：

@Component({
  selector: 'hero-component',
  template: `
            {{hero | json }} this works. This display the Firebase JSON response as seen below 
            <br>
            {{ obj.keys(hero)[0] }} this DOESN'T work
            <br> 
            {{ hero[obj.keys(hero)[0]].title }}this also DOESN'T work
  `
})
export class HeroComponent {
  @Input()
  hero:Hero;

  obj = Object;
}

或使用 Günter 在他的回答中建议的方法。

【讨论】：

不起作用。对象 = 对象。它抛出错误 EXCEPTION: TypeError: can't convert undefined to object in [ {{ obj.keys(hero)[0] }}
它对我有用。看到这个 plunkr：plnkr.co/edit/bUQd2XOronpjv2GvdhJa?p=preview。我认为还有另一个问题。可能是因为您加载 hero 对象的方式（异步）。所以最初对象是未定义的，它是在...之后设置的。
我会再试一次。谢谢蒂埃里 :)