在Angular2中访问Typescript对象变量 [英] Access Typescript Object Variables in Angular2
问题描述
如何显示以下Hero对象的ID和标题? 下面的Hero接口是根据Firebase JSON响应映射的.
How do I display the id and title of the below Hero object? The Hero interface below is mapped according to Firebase JSON response.
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 } }
推荐答案
更新
而不是pipes: [KeysPipe]
使用
@NgModule({
declarations: [KeysPipe],
exports: [KeysPipe],
}
export class SharedModule{}
@NgModule({
...
imports: [SharedModule],
})
原始
您不能在模板中使用Object.keys(hero)[0]
.不能使用全局引用,只能使用组件的成员.
You can't use Object.keys(hero)[0]
in the template. No global references can be used, only members of the component.
而是在组件上创建一个函数
Instead create a function on your component
getKeys(obj) {
return Object.keys(obj);
}
,然后在模板中
{{ getKeys(hero)[0] }}
或者,您可以构建一个提取键的管道,例如 https://stackoverflow.com/a/34074484/217408
Alternatively you can build a pipe that extracts the keys like for example 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]
上,或者另选
Don't forget to add the pipe to pipes: [KeysPipe]
on the component where you want to use it or alternatively
bootstrap(App, [provide(PLATFORM_PIPES, {useValue: KeysPipe, multi:true})]);
这篇关于在Angular2中访问Typescript对象变量的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!