如何将JSON对象键值对分别绑定到角度模板 [英] How to bind JSON object key value pair separately to angular template

问题描述

我有一个来自API的动态json，如下所示:

And i have a dynamic json coming from an API as below:

 {123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra",...}

我在模板中写了以下HTML代码，从资产文件夹中获取image-1和image-2徽标

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>

当我单击图像时如何获取json的键，并从相应的键值在图像下方显示文本. 当我单击时，我应该能够在click事件中传递键和文本.请帮忙，因为我是Angular的新手！

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!

推荐答案

首先将此JSON转换为JavaScript/TypeScript数组，如下所示:

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);
}

这将产生如下数据:

现在在模板中使用NgFor绑定数组. (对于NgFor，请参考此)

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>

我们在click事件中传递了整个对象.您可以从点击事件处理程序中的对象中读取任何所需的属性，并将其写入组件中.

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对象键值对分别绑定到角度模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！