如何使用 *ngFor 迭代对象键?
Posted
技术标签:
【中文标题】如何使用 *ngFor 迭代对象键?【英文标题】:How to iterate object keys using *ngFor? 【发布时间】:2016-08-30 23:28:32 【问题描述】:我一直在挖掘,发现我可以使用以下方法在对象上使用 *ngFor:
<div *ngFor="#obj of objs | ObjNgFor">...</div>
ObjNgFor
管道在哪里:
@Pipe( name: 'ObjNgFor', pure: false )
export class ObjNgFor implements PipeTransform
transform(value: any, args: any[] = null): any
return Object.keys(value).map(key => value[key]);
但是,当我有这样的对象时:
"propertyA":
"description":"this is the propertyA",
"default":"sth"
,
"propertyB":
"description":"this is the propertyB",
"default":"sth"
我不太确定如何提取“propertyA”和“propertyB”,以便可以从 *ngFor 指令访问。有什么想法吗?
更新
我想要做的是呈现以下 html:
<div *ngFor="#obj of objs | ObjNgFor" class="parameters-container">
<div class="parameter-desc">
SOMETHING:obj.description
</div>
</div>
某些东西等于propertyA
和propertyB
(这就是对象的结构)。因此,这将导致:
propertyA:this is the propertyA
propertyB:this is the propertyB
【问题讨论】:
【参考方案1】:只需从管道返回键而不是值,然后使用键访问值:
(let
而不是 beta.17 中的 #
)
@Pipe( name: 'ObjNgFor', pure: false )
export class ObjNgFor implements PipeTransform
transform(value: any, args: any[] = null): any
return Object.keys(value)//.map(key => value[key]);
@Component(
selector: 'my-app',
pipes: [ObjNgFor],
template: `
<h1>Hello</h1>
<div *ngFor="let key of objs | ObjNgFor">key:objs[key].description</div> `,
)
export class AppComponent
objs =
"propertyA":
"description":"this is the propertyA",
"default":"sth"
,
"propertyB":
"description":"this is the propertyB",
"default":"sth"
;
Plunker example
另见Select based on enum in Angular2
【讨论】:
Gunter - 我想向用户显示“propertyA”或“propertyB”。所以我需要以某种方式更换管道 不确定你的意思。取决于您想要显示哪个标准? 不确定您想到的确切用例,但我不明白为什么任何东西都不适用于嵌套对象。 如果objs
是异步的,这可以与async
管道耦合吗?
当然someObservable | async | ObjNgFor
【参考方案2】:
更新
在 6.1.0-beta.1 中引入了KeyValuePipe
https://github.com/angular/angular/pull/24319
<div *ngFor="let item of 'b': 1, 'a': 1 | keyvalue">
item.key - item.value
</div>
Plunker Example
以前的版本
你可以试试这样的
export class ObjNgFor implements PipeTransform
transform(value: any, args: any[] = null): any
return Object.keys(value).map(key => Object.assign( key , value[key]));
然后在你的模板上
<div *ngFor="let obj of objs | ObjNgFor">
obj.key - obj.description
</div>
Plunker
【讨论】:
键值管道正在按 Angular 6 中的键和值顺序排序。我们如何禁用它?【参考方案3】:或者不创建管道并将对象传递给*ngFor,只需将Object.keys(MyObject)
传递给*ngFor。它返回的结果与管道相同,但没有麻烦。
关于 TypeScript 文件:
let list = Object.keys(MyObject); // good old javascript on the rescue
在模板(html)上:
*ngFor="let item of list"
【讨论】:
谢谢!!!这使它看起来很简单。您应该添加要放在模板部分 btw =) 的内容 简洁的解决方案。我得到了列表中的数字值和字符串值,所以我使用 slice 方法来获取数组的正确一侧:options.slice(options.length / 2)。在这里找到了这个解决方案:***.com/questions/38554562/…【参考方案4】:keys.pipe.ts
import Pipe, PipeTransform from '@angular/core';
@Pipe( name: 'keys' )
export class KeysPipe implements PipeTransform
transform(obj: Object, args: any[] = null): any
let array = [];
Object.keys(obj).forEach(key =>
array.push(
value: obj[key],
key: key
);
);
return array;
app.module.ts
import KeysPipe from './keys.pipe';
@NgModule(
declarations: [
...
KeysPipe
]
)
example.component.html
<elem *ngFor="let item of obj | keys" id=" item.key ">
item.value
</elem>
【讨论】:
【参考方案5】:在这个例子中没有使用管道
*ngFor="let Value bof Values; let i = index"
i
【讨论】:
完整的代码会有所帮助,而不是其中的一部分。以上是关于如何使用 *ngFor 迭代对象键?的主要内容,如果未能解决你的问题,请参考以下文章