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

【问题标题】：How to bind JSON object key value pair separately to angular template如何将 JSON 对象键值对分别绑定到角度模板
【发布时间】：2019-02-21 10:21:17
【问题描述】：

我有一个来自 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 的键并从相应的键值显示图像下方的文本。当我单击时，我应该能够在单击事件中传递键和文本。请帮忙，因为我是 Angular 的新手！

【问题讨论】：

stackoverflow.com/questions/35534959/…

标签： json angular angular5 angular2-template typescript2.0

【解决方案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 参考this）

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

【讨论】：

使用 *ngFor 是个好主意，但我的结构是在一行中有两个 col-6 类。从技术上讲，每次迭代都应该使用两个键值对
这里如何获取value而不是key -- getKeyByValue(object, value) { return Object.keys(object).find(key => object[key] === value); }
使用上面的代码结构不对。由于我们没有将索引增加两次，因此使用偶数或奇数会跳过一级打印

【解决方案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);
}

【讨论】：

如何按键获取值，我的意思是我需要在 getKeyByValue(object, key) 函数中找到值而不是键

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：