如何将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来绑定数组。 （请参阅this获取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>