Как привязать пару значений ключа объекта JSON отдельно к угловому шаблону - PullRequest
Новая
       31

Как привязать пару значений ключа объекта JSON отдельно к угловому шаблону

0 голосов
/ 21 февраля 2019

И у меня есть динамический json, полученный из API, как показано ниже: 

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

Ответы [ 4 ]

0 голосов
/ 21 февраля 2019

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

0 голосов
/ 21 февраля 2019

Используйте эту функцию ниже в вашем коде: 

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);
}
0 голосов
/ 21 февраля 2019 
{123: "Mumbai", 456: "Bangalore", 789: "Chennai", 101: "Andhra",...}

Есть ли у вас влияние на этот JSON?Это очень похоже на проблему дизайна для меня.Я предполагаю, что эти числа являются идентификаторами.Я считаю, что что-то вроде этого должно быть лучше: 

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

В этом случае вы получите массив городов, который может быть интерфейсом для анализа. 

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

И вы можете легкоотрендерить его в html, используя * ngFor 

<div *ngFor="let city of cities">
     <!--do something with city.id and city.name-->
   </div>
0 голосов
/ 21 февраля 2019

Сначала преобразуйте этот 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);
}

Это приведет к таким данным, как показано ниже:

enter image description here

Теперь используйте 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>
...