相关疑难解决方法(0)

在Angular中迭代对象

我正在尝试在Angular 2 Alpha 28中做一些事情,并且我遇到了字典和NgFor的问题.

我有一个TypeScript接口,如下所示:

interface Dictionary {
    [ index: string ]: string
}
Run Code Online (Sandbox Code Playgroud)

在JavaScript中,这将转换为数据可能如下所示的对象:

myDict={'key1':'value1','key2':'value2'}
Run Code Online (Sandbox Code Playgroud)

我想迭代这个并尝试这个:

<div *ngFor="(#key, #value) of myDict">{{key}}:{{value}}</div>
Run Code Online (Sandbox Code Playgroud)

但无济于事,以下都没有:

<div *ngFor="#value of myDict">{{value}}</div>
<div *ngFor="#value of myDict #key=index">{{key}}:{{value}}</div>
Run Code Online (Sandbox Code Playgroud)

在所有情况下,我都会收到"意外令牌"或"无法找到'iterableDiff'管道支持对象"之类的错误

我在这里错过了什么?这不可能了吗?(第一种语法适用于Angular 1.x)或者是迭代对象的语法是不同的?

angular

110
推荐指数
7
解决办法
16万
查看次数

如何使用*ngFor显示json对象

我想从Firebase显示以下数据

{
   "-KBN9O_qqz-nZ9tPWFdM":{
      "createdAt":1456399292790,
      "isActive":true,
      "name":"Hero 1"
   },
   "-KBN9gjJw1ZlMgt9pVsl":{
      "createdAt":1456399371220,
      "isActive":true,
      "name":"Hero 2"
   },
   "-KBN9hYI4vYAsyh5k1lX":{
      "createdAt":1456399374548,
      "isActive":true,
      "name":"Hero 3"
   }
}
Run Code Online (Sandbox Code Playgroud)

在做angular.io Tour of Heroes教程时,例如

<li *ngFor="#hero of heroes">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
Run Code Online (Sandbox Code Playgroud)

所以英雄身份证应该显示例如-KBN9hYI4vYAsyh5k1lX ,英雄名称应该显示例如hero 3


我已经做了一些研究,并通过@Thierry Templier 使用*ngFor访问密钥和对象值来遇到这个stackoverflow解决方案

(1)这是解决我问题的正确方法吗?

(2)这个问题是否有一个更简单的解决方案,因为我觉得使用Angular2的开发人员显示这样的json数据真的很常见.

firebase typescript angular

24
推荐指数
3
解决办法
5万
查看次数

标签 统计

angular ×2

firebase ×1

typescript ×1