访问键和对象的值使用* ngFor

发布时间：2020-12-17 08:38:55 所属栏目：安全来源：网络整理

导读：位混淆了如何获取对象的Key和Value在angular2，而usng * ngFor对于迭代对象。我知道在角1.x有语法 ng-repeat="(key,value) in demo" 但在angular2我不知道我累了，但没有成功。我试过下面的代码，但没有运行，请告诉我在哪里我做错了。 ul li *ngFor='#key o

位混淆了如何获取对象的Key和Value在angular2，而usng * ngFor对于迭代对象。我知道在角1.x有语法

ng-repeat="(key,value) in demo"

但在angular2我不知道我累了，但没有成功。我试过下面的代码，但没有运行，请告诉我在哪里我做错了。

<ul>
  <li *ngFor='#key of demo'>{{key}}</li>
</ul>

demo = {
    'key1': [{'key11':'value11'},{'key12':'value12'}],'key2': [{'key21':'value21'},{'key22':'value22'}],}

这里是plnkr我曾尝试过：
http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

我想使用* ngFor动态获取key1和key2。如何得到它？
我搜索alot发现使用管道的想法，但如何使用我不知道。
有没有任何内置的管道做同样的在angular2？

您可以创建自定义管道以返回每个元素的键列表。
像这样：

import { PipeTransform,Pipe } from '@angular/core';

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value,args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }
}

并使用它像：

<tr *ngFor="#c of content">           
  <td *ngFor="#key of c | keys">{{key}}: {{c[key]}}</td>
</tr>

编辑

您还可以返回包含键和值的条目：

@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
  transform(value,args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push({key: key,value: value[key]});
    }
    return keys;
  }
}

并使用它像：

<span *ngFor="#entry of content | keys">           
  Key: {{entry.key}},value: {{entry.value}}
</span>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!