gpt4 book ai didi

angular - 如何使用 *ngFor 迭代对象键?

转载 作者:太空狗 更新时间:2023-10-29 17:05:44 24 4
gpt4 key购买 nike

我一直在四处挖掘,发现我可以使用以下内容对对象使用 *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>

其中某物等于 propertyApropertyB(这就是对象的结构)。因此,这将导致:

propertyA:this is the propertyA
propertyB:this is the propertyB

最佳答案

或者不是创建管道并将对象传递给 *ngFor,而是将 Object.keys(MyObject) 传递给 *ngFor。它返回与管道相同的结果,但没有麻烦。

在 TypeScript 文件上:

let list = Object.keys(MyObject); // good old javascript on the rescue

在模板 (html) 上:

*ngFor="let item of list"

关于angular - 如何使用 *ngFor 迭代对象键?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37046138/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com