在 Angular2 中访问 Typescript 对象变量

Posted 2023-03-13

【中文标题】在 Angular2 中访问 Typescript 对象变量

【英文标题】：Access Typescript Object Variables in Angular2

【发布时间】：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 数组转换为一个更有用的对象。

【参考方案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://***.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 对象的方式（异步）。所以最初对象是未定义的，它是在...之后设置的。

我会再试一次。谢谢蒂埃里 :)