访问 *ngFor angular8 中的对象键和值答案

【问题标题】：access object key and value in *ngFor angular8访问 *ngFor angular8 中的对象键和值
【发布时间】：2020-10-23 10:18:41
【问题描述】：

我想访问 ngFor 中的对象键和值例如这是我的数组

var array = [
  {'random1':value1},
  {'random2':value2},
  {'random3': value3}
]

现在对象键都是动态的，我像这样使用我的数组

<tr *ngFor="let item of arrayl; let i of index">
  <td>{{i+1}}</td>
  <td>item.key</td>// here i want object key
  <td>item.value</td>// here object value
</tr>

另一个问题如果我的数组看起来像这样

var array2 = [
 ['random1',value1],
 ['random2',value2],
 ['random3',value3]
]

那么如何实现同样的目标

提前致谢

【问题讨论】：

第一个数组是数组的对象，第二个数组是数组的数组。那么你怎么能做到同样的事情呢？请描述一下你的最终目标是什么
我的意思是在我的 *ngFor 我想要 item.key = array[item][0]//第一个值，而对于 item.value = array[item][1]//第二个值 @阿布苏菲安

标签： angular object angular6 angular8 ngfor

【解决方案1】：

Demo 案例一

<tr *ngFor="let item of array; let i = index">
   <td>{{i+1}}</td>
   <ng-container *ngFor="let el of item | keyvalue">
       <td>{{el.key}}</td>
       <td>{{el.value}}</td>
   </ng-container>
</tr>

案例2

<tr *ngFor="let item of array2; let i = index">
   <td>{{i+1}}</td>
   <td>{{item[0]}}</td>
   <td>{{item[1]}}</td>
</tr>

【讨论】：

注意使用不纯的管道。如果数组项发生变化，这将不起作用。
感谢@pc_coder 现在我不必更改我的阵列，它的工作原理
你好@pc_coder，我怎样才能在角度垫表中实现同样的目标

【解决方案2】：

这有点奇怪，但你可以这样做：

第一种情况：

<tr *ngFor="let item of array; index as i">
  <td>{{i+1}}</td>
  <td>{{ getKey(item) }}</td>
  <td>{{ item[getKey(item)] }}</td>
</tr>

// on component class
getKey(item: any): string {
  return Object.keys(item)[0];
}

第二种情况：

<tr *ngFor="let item of array2; index as i">
  <td>{{i+1}}</td>
  <td>{{ item[0] }}</td>
  <td>{{ item[1] }}</td>
</tr>

【讨论】：

函数不是好办法。它总是听对性能不利！
@Danilo Torchio 你试过第二种情况吗，因为对我来说它不起作用
是的，我也不喜欢第一种情况。看看这个stackblitz。两个样本都正常工作。 @pc_coder 您不必放置索引 (i)，因为每个项目都是第一个数组的值。
谢谢@DaniloTorchio 现在它可以工作了，在第一种情况下是否有任何大问题，因为如果是，我必须更改我的阵列？
作为@pc_coder cmets，考虑到性能，使用第一种方法并不是一个好主意，但无论如何它都应该工作。