Question

我想显示来自数据库的列表中的数据。但是我不想给出属性名称来显示数据，因为我想重用Markup。下面是我的代码。

<div class="card card-design" *ngFor="let val of listData; let i = index">
  <div class="card-body">
    <label class="CardViewText CardViewHeaderFont marginZero">{{val[0]}}</label>
  </div>
</div>

像上面一样，我想使用索引而不是属性名称来绑定列值。我无法实现。有人可以帮我吗

Answer 1

如果您有对象，并且想知道“键”，则可以使用JSON.stringify（转换为obj字符串）+ replace（删除特殊字符，但不删除“：”和“，”）+ （创建数组）+映射（每个元素的key：value，使用split我们只能得到该key。puff

getOrderedKeys(obj):string[]
{
  return JSON.stringify(obj)
    .replace(/[&\/\\#+()$~%.'"*?<>{}]/g,'')
    .split(',')
    .map(x=>x.split(':')[0]);
}

因此，当您拥有this.listData

this.keys=this.getOrderedKeys(this.listData[0])
//and
<div class="card card-design" *ngFor="let val of listData; let i = index">
  <div class="card-body">
    <label class="CardViewText CardViewHeaderFont marginZero">{{val[keys[0]]}}
    </label>
  </div>
</div>

Answer 2

如果使用索引，则必须使用数组listData，例如：

<div class="card card-design" *ngFor="let val of listData; let i = index">
  <div class="card-body">
    <label class="CardViewText CardViewHeaderFont marginZero">{{listData[i]}}</label>
  </div>
</div>

如何使用索引而不是angular中的属性名称显示列表数据

2 个答案: