使用Angular中的键值对和嵌套对象。

huangapple
go评论89阅读模式
英文:

using keyValue with nested objects Angular

问题

我有一个包含嵌套对象的对象，我希望在组件中使用它来显示HTML。

  1. export const Data: any = {
  2.   obj1: {
  3.     text: `<h3>Title1</h3>
  4.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  5.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  6.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  7.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
  8.     title: `Some copy`,
  9.   },
  10.   obj2: {
  11.     text: `<h3>Title2</h3>
  12.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  13.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  14.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  15.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
  16.     title: `Some copy`,
  17.   },
  18.   obj3: {
  19.     copy: `<h3>Title3</h3>
  20.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  21.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  22.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>
  23.     <p>Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy </p>`,
  24.     title: `Some copy`,
  25.   },
  26. };

我尝试使用keyvalue管道在循环中显示，从对象中获取title属性并将其用于组件属性绑定。

  1. <app-comp
  2.   *ngFor="let item of data | keyvalue"
  3.   [title]="item.title"
  4. >
  5.   <div>{{item.value}}</div>
  6. </app-comp>

我尝试嵌套另一个循环，但无法使其工作。

英文:

I have an object that has nested objects that I wish to use to display HTML within a component

  1. export const Data: any = {
  2.   obj1: {
  3.     text: `&lt;h3&gt;Title1&lt;/h3&gt;
  4.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  5.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  6.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  7.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;`,
  8.     title: `Some copy`,
  9.   },
  10.   obj2: {
  11.     text: `&lt;h3&gt;Title2&lt;/h3&gt;
  12.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  13.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  14.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  15.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;`,
  16.     title: `Some copy`,
  17.   },
  18.   obj3: {
  19.     copy: `&lt;h3&gt;Title3&lt;/h3&gt;
  20.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  21.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  22.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;
  23.     &lt;p&gt;Some copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copySome copy &lt;/p&gt;`,
  24.     title: `Some copy`,
  25.   },
  26. };

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

  1.      &lt;app-comp
  2.         *ngFor=&quot;let item of data | keyvalue&quot;
  3.         [title]=&quot;item.title&quot;
  4.       &gt;
  5.         &lt;div&gt;{{item.value}}&lt;/div&gt;
  6.       &lt;/app-comp&gt;

I've tried nesting another for loop but can't get it to work

答案1

得分: 1

在你的组件ts文件中，只需粘贴以下代码：

  1.    // 在构造函数之前
  2.    items = Object.values(Data);

在你的html文件中：

  1. <app-comp
  2.         *ngFor="let item of items"
  3.         [title]="item.title"
  4.       >
  5.         <div [innerHTML]="item.copy"></div>
  6. </app-comp>

我们在这里做的是获取你想要的Data对象的所有值，并将其保存在组件的属性中。
Object.values(Data)将返回Data对象的所有值。

希望这能帮助解决这个问题以及与Object.values相关的未来问题。

英文:

In your component ts just paste this:

  1.    // before constructor
  2.    items = Object.values(Data);

In your html

  1. &lt;app-comp
  2.         *ngFor=&quot;let item of items&quot;
  3.         [title]=&quot;item.title&quot;
  4.       &gt;
  5.         &lt;div [innerHTML]=&quot;item.copy&quot;&gt;&lt;/div&gt;
  6. &lt;/app-comp&gt;

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

huangapple
  • 本文由 发表于 2023年8月8日 23:59:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76861298.html
  • angular
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定