英文:
using keyValue with nested objects Angular
问题
我有一个包含嵌套对象的对象，我希望在组件中使用它来显示HTML。
export const Data: any = {
obj1: {
text: `<h3>Title1</h3>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
title: `Some copy`,
},
obj2: {
text: `<h3>Title2</h3>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
title: `Some copy`,
},
obj3: {
copy: `<h3>Title3</h3>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
title: `Some copy`,
},
};
我尝试使用keyvalue管道在循环中显示，从对象中获取title属性并将其用于组件属性绑定。
<app-comp
*ngFor="let item of data | keyvalue"
[title]="item.title"
>
<div>{{item.value}}</div>
</app-comp>
我尝试嵌套另一个循环，但无法使其工作。
英文:
I have an object that has nested objects that I wish to use to display HTML within a component
export const Data: any = {
obj1: {
text: `<h3>Title1</h3>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
title: `Some copy`,
},
obj2: {
text: `<h3>Title2</h3>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
title: `Some copy`,
},
obj3: {
copy: `<h3>Title3</h3>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
<p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
title: `Some copy`,
},
};
And I'm trying to use keyvalue pipe to display within a loop, taking the title property from the object and using it for the component property binding
<app-comp
*ngFor="let item of data | keyvalue"
[title]="item.title"
>
<div>{{item.value}}</div>
</app-comp>
I've tried nesting another for loop but can't get it to work
答案1
得分: 1
在你的组件ts文件中，只需粘贴以下代码：
// 在构造函数之前
items = Object.values(Data);
在你的html文件中：
<app-comp
*ngFor="let item of items"
[title]="item.title"
>
<div [innerHTML]="item.copy"></div>
</app-comp>
我们在这里做的是获取你想要的Data对象的所有值，并将其保存在组件的属性中。
Object.values(Data)将返回Data对象的所有值。
希望这能帮助解决这个问题以及与Object.values相关的未来问题。
英文:
In your component ts just paste this:
// before constructor
items = Object.values(Data);
In your html
<app-comp
*ngFor="let item of items"
[title]="item.title"
>
<div [innerHTML]="item.copy"></div>
</app-comp>
What we did here is getting all values of Data object which you want here and saved in a property of component.
Object.values(Data) will return all the values of Data object.
I hope it will help to solve this problem and future problems related to Object.values
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论