使用Angular展示数组items中的每个项目。

17 浏览
0 Comments

使用Angular展示数组items中的每个项目。

我有点困惑如何在使用*ngFor迭代对象时获取对象的key和value。我知道在 angular 1.x 中有一个类似于

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

的语法，但我不知道如何在 angular2 中实现相同的效果。我尝试了类似的东西，但没有成功：

    • {{key}}

 

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

以下是我的尝试的 plnkr：

http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview

如何使用 *ngFor 动态获取 key1 和 key2？在广泛搜索后，我发现使用管道的想法，但我不知道如何开始。

在 angular2 中是否有任何内置管道可以实现相同的效果？

admin 更改状态以发布 2023年5月23日
0

2 答案

0 Comments

将Object.keys在模板中可访问，并在*ngFor中使用它。

@Component({
  selector: 'app-myview',
  template: `{{key + ' : ' + items[key]}}`
})
export class MyComponent {
  objectKeys = Object.keys;
  items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' };
  constructor(){}
}

0
0 Comments

在Angular(v6.1.0)的最新版本中，Angular团队已经添加了一个新的内置管道，名为keyvalue管道，来帮助您迭代对象、映射和数组，在Angular的common模块中。

    Key: {{item.key}} and Value: {{item.value}}

为了保持原始顺序，使用keyvalue:onCompare，
并在组件中定义回调函数：

// ...
import {KeyValue} from '@angular/common';
@Component(/* ... */)
export class MyComponent {
  private onCompare(_left: KeyValue, _right: KeyValue): number {
    return -1;
  }
}

工作示例

有关更多有用信息，请在这里查看 -

如果您使用Angular v5或更低版本，或者您想使用管道来实现此功能，请参考这个答案

0