Question

我有一个像这样的数组对象：[key1:Array[3], key2:Array[1], key3:Array[3]]。我想在HTML中显示键和值，如下所示：

key1 
item1 item2 item3
key2
item4
key3
item5 item6 item7

当我打开对象时，我只看到

Array[0]
  >key1:Array[3]
  >key2:Array[1]
  >key3:Array[3]

我正在使用带有Angular2的javascript，这是我尝试访问数组（我在另一个stackover流程帖子中找到它）

<li *ngFor="let k of keysArray">
   <span *ngFor="let v of generateArray(k)"> {{v}} </span>
</li>
generateArray(obj){
   return Object.keys(obj).map((key)=>{ return obj[key]});
}

但是我仍然无法在HTML上显示键或值。

Answer 1

你试过这个吗？

<li *ngFor="let k of keysArray">
   <span *ngFor="let v of k"> {{v}} </span>
</li>

Answer 2

您是否在模板中使用了 Object.keys ？

如果不是这样使用它并获得你想要的东西，比如这个

<li *ngFor="let k of keysGetter(keysArray)">
   {{k + ' : ' + keysArray[k]}}
</li>

keysGetter = Object.keys;
keysArray = {keyOne: [1,2,3,4], keyTwo: [1,2,4], keyThree: [1,3,4]};

<强> WORKING DEMO

Answer 3

您可以使用此密钥管道：

@Pipe({
    "name": "keys",
})
export class Keys implements PipeTransform {

    constructor() {}

    public transform(value) {
        if (!value) {
            return value;
        }

        let keys = [];
        for (let key in value) {
            if (value) {
                keys.push({
                    "key": key,
                    "value": value[key],
                })
            }
        }
        return keys;
    }
}

在你的for循环中，你现在可以这样做：

<li *ngFor="let k of keysArray | keys">
   <span> {{k.key}} - {{k.value}} </span>
</li>

Answer 4

因为＆＃34; k＆＃34;是一个对象：{key1：Array [3]} with＆＃34; key1＆＃34;作为关键，你需要访问它的价值：

Object.keys（k）[0] =＆gt;这是关键
k [Object.keys（k）[0]] =＆gt;这是值==数组

结果：

<li *ngFor="let k of keysArray">
    <span *ngFor="let v of k[Object.keys(k)[0]]"> {{v}} </span>
</li>

除了这个解决方案，我会考虑使用这个结构：

[{＆＃34;键＆＃34;：KEY1，＆＃34;值＆＃34;：数组[3]}，{＆＃34;键＆＃34;：KEY2，＆＃34;值＆＃34 ;：数组[3]}，{＆＃34;键＆＃34;：键3，＆＃34;值＆＃34;：数组[3]}]

然后将其用作：

<li *ngFor="let k of keysArray">
   <span *ngFor="let v of k.value </span>
</li>

循环遍历HTML中数组对象的键和值

4 个答案: