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

如何在Angular中获取JSON对象的键和值

1 个答案: