Есть ли функция map для отображения списка массивов в angular?

Question

У меня есть список массивов, подобный этому,

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

И всегда меняйте ключи массивов в списке. Иногда его имеют 2 клавиши, такие как телефон, адрес. Иногда его имеют 3 клавиши, такие как имя, телефон, адрес.

Так есть ли какая-либо функция для отображения данных, подобная этой, в angular?

Answer 1

Используйте оператор безопасной навигации ?.. Он защищает от значений null и undefined в путях свойств. Он также может быть прикован цепью, если у вас есть древовидная структура item?.name?.firstname.

<div *ngFor="let item of arr">
  <p>{{item?.name || '&nbsp;'}}</p>
  <p>{{item?.phone || '&nbsp;'}}</p>
  <p>{{item?.address || '&nbsp;'}}</p>
</div>

Обновление

Если вы не знаете ключей, то это не так действительно идеально подходит для отображения значения в таблице. Тем не менее, вы можете использовать keyvalue трубу. Однако вы не знаете, какое значение вы используете в любой момент.

<div *ngFor="let item of arr">
  <div *ngFor="let data of item | keyvalue">
    {{data.value}}
  </div>
</div>

Рабочий пример: Stackblitz

Answer 2

Присвойте свой массив переменной и l oop этой переменной в html, чтобы создать таблицу

 <table>
      <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Address</th>
      </tr>
      <tr *ngFor="let item of array">
        <td>{{item?.name || 'no name'}}</td>
        <td>{{item?.phone}}</td>
        <td>{{item?.address}}</td>
      </tr>
    </table>