如何将JSON对象键值对分别绑定到角度模板

Question

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

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

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

  <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的新手！

Answer 1

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

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）

<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事件中传递了整个对象。 您可以从单击事件处理程序中的对象中读取任何所需的属性，并将其写入组件中。

根据您的特殊要求，可以使用以下标记：

<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>

Answer 2

在代码中使用以下功能：

getKeyByValue(object, value) {
      return Object.keys(object).find(key => object[key] === value);
}

并用作

var dynamicJson = {123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra"}

cityClick(value){
      var key = this.getKeyByValue(this.dynamicJson, value);
      console.log(key);
}

Answer 3

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

您对该JSON有影响吗？ 对我来说，这看起来像是一个设计问题。 我认为这些数字是id的。 我相信这样的事情应该会更好：

[{id: "123", name: "Mumbai"}, {id: "456", name: "Bangalore"}, {id: "789", name: "Chennai"}, {id: "101", name: "Andhra"},...}]

在这种情况下，您会收到一系列城市，这可能是要解析的界面。

export interface City {
   id: string;
   name: string;
} 

您可以使用* ngFor轻松地将其呈现为html

<div *ngFor="let city of cities">
     <!--do something with city.id and city.name-->
   </div>

Answer 4

<div *ngFor let value of json |keyvalue > </div>