Как отобразить данные списка, используя индексирование вместо имени свойства в угловых

Question

Я хочу отображать данные из списка, поступающего из базы данных. Но я не хочу указывать имя свойства для отображения данных, поскольку я пытаюсь повторно использовать разметку. Ниже мой код.

<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 (чтобы удалить специальный символ, но не «:» и «,») + split(создать массив) + map (ключ каждого элемента: значение, используя split, мы получаем только ключ. 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>