Как получить ключи и значения объекта JSON в Angular

Question

Я делаю стол из смайликов.У меня есть объект JSON с около ста пар ключ-значение.Я пытаюсь сделать это в цикле * ngFor с трубой ключ-значение.

Мне нужно, чтобы это выглядело так:

<td>+1</td>
<td>https://link</td>

Но я получаю:

{
  "key": "0",
  "value": {
    "100": "https://link",
    "+1": "https://link",
    "-1": "https://link"
  }
}

Мой код:

//------------1------------
export class Emoji {
    [key:string]:string
}

//------------2-----------

export const EMOJIS: Emoji[] = [
  {
    "+1": "https://link",
    "-1": "https://link",
    "100": "https://link"
  }
];

<!-- ------4------ -->
<h2>My Emojis</h2>
<table class="emojis">
  <tr *ngFor="let emoji of emojis | keyvalue">
    <td><span class="badge">{{emoji.key}}</span></td>
    <td>{{emoji.value}}</td>
  </tr>
</table>

Answer 1

Ваш EMOJIS - это массив с одним элементом, поэтому вы получаете ключ 0 (один-единственный индекс) и значение - весь объект с эмодзи.

Избавьтесь от массива.Вместо этого просто создайте объект:

export const EMOJIS = {
  "+1": "https://link",
  "-1": "https://link",
  "100": "https://link"
}

Теперь канал keyvalue даст вам то, что вы ожидаете.

---

Что касается проблем с печатанием, просто используйте интерфейс -тебе не нужен класс.

interface Emoji { [key: string]: string } 
const emojis: Emoji = { '+1': 'link' }