- 首页
- 其他开发
- 如何将 JSON 对象键值对分别绑定到 angular 模板
如何将 JSON 对象键值对分别绑定到 angular 模板
[英] How to bind JSON object key value pair separately to angular template
本文介绍了如何将 JSON 对象键值对分别绑定到 angular 模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个来自 API 的动态 json，如下所示:
{123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra",...}
我在模板中编写了以下 HTML 代码，其中我从我的资产文件夹中获取 image-1、image-2 徽标
<div class="col-6" (click)="cityClick('Bangalore')"><div class="img-1">//我的 image-1 标志放在这里
<div class="img-text">班加罗尔
<div class="col-6" col-6 (click)="cityClick('Mumbai')"><div id="image_block" class="img-2">//我的 image-2 标志放在这里
<div id="text_block" class="img-text">孟买
如何在单击图像时获取 json 的键，并从相应的键值中显示图像下方的文本.当我点击时，我应该能够在点击事件中传递键和文本.请帮助我，因为我是 Angular 的新手！
解决方案
首先将此 JSON 转换为 JavaScript/TypeScript 数组，如下所示:
var json = {123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra" };var jsonToBeUsed = [];for(json中的var类型){项目 = {};item.key = 类型；item.value = json[类型];jsonToBeUsed.push(item);}
这将产生如下数据:
现在在模板中使用 NgFor 来绑定数组.(NgFor 参考 this)
<div *ngFor="让数组项"><div class="col-6" (click)="cityClick(item)"><div class="img-1">//我的 image-1 标志放在这里
<div class="img-text">{{item.value}}
我们已经在点击事件中传递了整个对象.您可以在单击事件处理程序中从对象中读取任何所需的属性，您将在组件中编写该处理程序.
对于您的特殊要求，您可以使用以下标记:
<div *ngIf="even" class='col-6' (click)="cityClick(array[i])"><div class="img-1">//我的 image-1 标志放在这里
<div class="img-text">{{array[i].value}}
<div *ngIf="!even" class='col-6' (click)="cityClick(array[i])"><div class="img-1">//我的 image-1 标志放在这里
<div class="img-text">{{array[i].value}}
And i have a dynamic json coming from an API as below:
{123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra",...}
I have below HTML code written in my template in which I am getting image-1, image-2 logos from my assets folder
<div class="row">
<div class="col-6" (click)="cityClick('Bangalore')">
<div class="img-1">
// my image-1 logo goes here
</div>
<div class="img-text">
Bangalore
</div>
</div>
<div class="col-6" col-6 (click)="cityClick('Mumbai')">
<div id="image_block" class="img-2">
// my image-2 logo goes here
</div>
<div id="text_block" class="img-text">
Mumbai
</div>
</div>
</div>
How to get the key of the json when i click on image and also display the text below the image from the corresponding key-value.
And when i click i should be able to pass the key and text inside the click event. Please help as i am new to Angular!
解决方案
First convert this JSON into an JavaScript/TypeScript array like below:
var json = {123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra" };
var jsonToBeUsed = [];
for (var type in json) {
item = {};
item.key = type;
item.value = json[type];
jsonToBeUsed.push(item);
}
This will result in data like below:
Now use NgFor in the template to bind array. (Refer this for NgFor)
<div class="row">
<div *ngFor="let item of array">
<div class="col-6" (click)="cityClick(item)">
<div class="img-1">
// my image-1 logo goes here
</div>
<div class="img-text">
{{item.value}}
</div>
</div>
</div>
</div>
We have passed the whole object in the click event. You can read any of the desired property from the object in click event handler which you will write in the component.
For your special requirement, you can use below markup:
<div class='row' *ngFor='let index of array; let i = index; let even = even'>
<div *ngIf="even" class='col-6' (click)="cityClick(array[i])">
<div class="img-1">
// my image-1 logo goes here
</div>
<div class="img-text">
{{array[i].value}}
</div>
</div>
<div *ngIf="!even" class='col-6' (click)="cityClick(array[i])">
<div class="img-1">
// my image-1 logo goes here
</div>
<div class="img-text">
{{array[i].value}}
</div>
</div>
</div>
这篇关于如何将 JSON 对象键值对分别绑定到 angular 模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
