你可以在Angular中的插值内部使用*ngFor迭代变量吗?

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

How can I use *ngFor iterator variable inside interpolation in Angular?

问题

我有一个Angular属性,它具有我创建的接口的子属性。我想使用它,以避免编写每行标题,然后匹配从我的数据库获取的数据。

为此,我想使用*ngFor和插值。我尝试了几种方法,但找不到语法或正确的替代方法来实现这一目标。

我的问题是,我如何在我的变量的插值中使用*ngFor迭代器变量?

这是我想实现的一个示例:

在TS侧的属性示例:

// 自定义属性
information: customInterface[] = [
    {
      zone: "europe",
      names: [
        { dbName: "city1", title: "Paris" },
        { dbName: "city2", title: "Madrid" },
        { dbName: "city3", title: "Berlin" },
        { dbName: "city4", title: "Rome" },
      ]
    },
    { zone: "XX", names: [XX] }
  ];

// 属性2,存储我实际想要从数据库中显示的数据
DBdata: customInterface2 = {
     city1 : 'string',
     city2 : 'string',
     city3 : 'string',
     等等....}

HTML侧:

<div *ngFor="let data of information">
    <div *ngIf="data.zone== 'europe'">
         <div *ngFor="let city of data.names">
              {{city.title}} : {{ DBdata[city.dbName] }}
         </div>
    </div>
</div>

希望这个例子更清楚。谢谢帮助!

英文:

I have an Angular property that has subproperties following an interface created by myself. I would like to use it in order to avoid writing each line title and then matching the data I get from my Data Base.

For this, I would like to use *ngFOR and interpolation. I have tried several things, but I can't find the syntax or the right alternative to achieve this.

My question is, how can I use the *ngFor iterator variable inside the interpolation of my variable ?

Here is an exemple of what i would like to achieve :

Property exemple in TS side :

//Custom property
information: customInterface[] = [
    {
      zone: "europe",
      names: [
        { dbName: "city1", title: "Paris" },
        { dbName: "city2", title: "Madrid" },
        { dbName: "city3", title: "Berlin" },
        { dbName: "city4", title: "Rome" },
      ]
    },
    { zone: "XX",
      names:[
XX]}
  ];

//Property 2 sotring data I actually want to show from the Data base
DBdata : customInterface2 = {
     city1 : 'string',
     city2 : 'string',
     city3 : 'string',
     etc....}

Html side :

<div *ngFor="let data of information">
    <div *ngIf="data.zone== 'europe'">
         <div *ngFor="let city of data.names">
              {{city.title}} : {{ DBdata.city.dbName }}
         </div>
    </div>
</div>

Hope it is more clear with the example. Thanks for the help !

答案1

得分: 1

这应该可以工作;

DBData[city.dbName]

这将使用方括号语法来访问对象属性 - https://www.w3schools.com/js/js_objects.asp

英文:

This should work;

DBData[city.dbName]

This would make use the bracket syntax for accessing object properties - https://www.w3schools.com/js/js_objects.asp

答案2

得分: 0

为了实现您所期望的结果,您可以使用方括号符号([])来根据information数组中的值访问动态属性。以下是您代码的更新版本:

// 自定义属性
information: customInterface[] = [
  {
    zone: "europe",
    names: [
      { dbName: "city1", title: "Paris" },
      { dbName: "city2", title: "Madrid" },
      { dbName: "city3", title: "Berlin" },
      { dbName: "city4", title: "Rome" },
    ]
  },
  // 根据需要添加更多条目
];

// 存储来自数据库的数据的属性
DBdata: customInterface2 = {
  city1: '城市1的数据',
  city2: '城市2的数据',
  city3: '城市3的数据',
  // 根据需要添加更多条目
};
<div *ngFor="let data of information">
  <div *ngIf="data.zone === 'europe'">
    <div *ngFor="let city of data.names">
      {{ city.title }}: {{ DBdata[city.dbName] }}
    </div>
  </div>
</div>

在这段代码中,DBdata对象使用方括号符号来根据information数组中的dbName值访问动态属性。这允许您动态插值相应的值。

请注意,为了使这种方法正常工作,您需要确保DBdata对象具有与information数组中定义的dbName值相匹配的属性名称。

英文:

To achieve your desired result, you can use the bracket notation ([]) to access dynamic properties based on the values from your information array. Here's an updated version of your code:

// Custom property
information: customInterface[] = [
  {
    zone: &quot;europe&quot;,
    names: [
      { dbName: &quot;city1&quot;, title: &quot;Paris&quot; },
      { dbName: &quot;city2&quot;, title: &quot;Madrid&quot; },
      { dbName: &quot;city3&quot;, title: &quot;Berlin&quot; },
      { dbName: &quot;city4&quot;, title: &quot;Rome&quot; },
    ]
  },
  // Add more entries as needed
];

// Property storing data from the database
DBdata: customInterface2 = {
  city1: &#39;Data for City 1&#39;,
  city2: &#39;Data for City 2&#39;,
  city3: &#39;Data for City 3&#39;,
  // Add more entries as needed
};
&lt;div *ngFor=&quot;let data of information&quot;&gt;
  &lt;div *ngIf=&quot;data.zone === &#39;europe&#39;&quot;&gt;
    &lt;div *ngFor=&quot;let city of data.names&quot;&gt;
      {{ city.title }}: {{ DBdata[city.dbName] }}
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

In this code, the DBdata object uses the bracket notation to access the dynamic properties based on the dbName values from the information array. This allows you to interpolate the corresponding values dynamically.

Note that you need to ensure that the DBdata object has properties with names matching the dbName values defined in your information array for this approach to work correctly.

huangapple
  • 本文由 发表于 2023年5月30日 04:44:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/76360243.html
匿名

发表评论

匿名网友

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

确定