英文:
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: "europe",
names: [
{ dbName: "city1", title: "Paris" },
{ dbName: "city2", title: "Madrid" },
{ dbName: "city3", title: "Berlin" },
{ dbName: "city4", title: "Rome" },
]
},
// Add more entries as needed
];
// Property storing data from the database
DBdata: customInterface2 = {
city1: 'Data for City 1',
city2: 'Data for City 2',
city3: 'Data for City 3',
// Add more entries as needed
};
<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>
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论