Question

我有一个从API调用返回的对象，并且试图在HTML表格中显示对象详细信息。我能够获取密钥，但无法获取值。我正在使用角度7。

我尝试过让密钥= Object.keys(successMsg.body.result);，这给了我"ABC"，我如何获得其他值？

在HTML中，我正在使用：

<tbody> 
<tr *ngFor="let data of dataToShow | keyvalue"> 
<td> {{data.key}} </td> 
<td> {{data.value}} </td>
</tr> 
</tbody>

api数据为：{ "ABC": [ "1234567" ], "XYZ": [ "5678912" ] }

Answer 1

要同时访问键和值，您可以执行以下操作：

Object.entries(successMsg.body.result);

这将返回每个键/值对的数组。键是第一个元素，值是第二个元素。

const result = { "ABC": [ "1234567" ], "XYZ": [ "5678912" ] };

const entries = Object.entries(result);

console.log(entries);

Answer 2

在组件中，通过

获取对象的键

this.data = successMsg.body.result;
this.keys = Object.keys(successMsg.body.result);

在表格中，遍历数据

<tbody> 
<tr *ngFor="let val of keys"> 
<td> {{val}} </td> 
<td> {{data[value][0]}} </td>
</tr> 
</tbody>

如果上面的数组对象中只有一个值，则可以使用上面的代码，但是如果value对象中有更多的值，则可能需要遍历它

Answer 3

访问值

Object.values(successMsg.body.result); // Returns [[ "1234567" ], [ "5678912" ]]

var result = { "ABC": [ "1234567" ], "XYZ": [ "5678912" ] };

console.log("****Keys****");
console.log(Object.keys(result));

console.log("****Values****");
console.log(Object.values(result));

遍历数组的对象以显示在表中

3 个答案: