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

Question

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

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

我在我的模板中编写了下面的HTML代码，其中我从assets文件夹中获得了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的key，并从对应的key-value中显示图片下方的文本。当我单击时，我应该能够在单击事件中传递键和文本。请帮帮忙，因为我是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的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事件中传递了整个对象。您可以从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>