Блог

У меня есть этот объект массивов с данными о встречах:

Таким образом, по сути, это набор дат (ключей) с массивом объектов. Каждый элемент в массиве является объектом данных о встречах, таких как день, тема, клиент и продолжительность. Итак, 2 декабря имеет две встречи, а 9 декабря — три и т.д.

Я хочу отобразить, чтобы выполнить итерацию по нему и отобразить его в этом табличном формате:

но пытаюсь отобразить его, используя следующий HTML:

 <div *ngFor="let detail of details"   class="card-body">
<table class="table table-striped">
  <thead>
  <tr>
  <th>  Day </th>
  <th>Duration</th>
  <th> Subject</th>
  <th>Client</th>
  </tr>
  </thead>
  <tfoot>
  <tr *ngFor="let detaill of detail">
  <td> <small>{{detaill.day}}</small></td>
  <td> <small>{{detaill.duration}} </small> </td>
  <td><small>{{detaill.subject}}</small> </td>
    <td><small>{{detaill.client}} </small></td>
  </tfoot>
 

это дает мне эту ошибку:

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

я попытался преобразовать их в массивы, Object.entries(appointments) но при этом испортил порядок дат.

Что я могу сделать, чтобы отобразить таблицу по своему усмотрению?

Форматирование вашего объекта данных в новый массив объектов может быть полезным для вас, чтобы выполнить цикл * ngFor и выполнить свою задачу, я думаю. Этот сегмент кода может быть полезен для форматирования исходного объекта данных.

 // Let's assume your original data object is as follows
const obj = {
    '02/11/2020': [
        {
            duration: 4,
            subject: 'Meeting',
            client: 'Bob'
        },
        {
            duration: 6,
            subject: 'Review',
            client: 'Anna'
        }
    ],
    '03/11/2020': [
        {
            duration: 5,
            subject: 'Review',
            client: 'Rob'
        }
    ]
};

// Find keys and values (as two separated arrays)
const keys = Object.keys(obj);
const values = Object.values(obj);

// Now formulate the new array
const formattedObj = [];
keys.forEach((key, index) => {
    formattedObj.push({
        day: key,
        records: values[index].map(value => ({
            day: key,
            ...value
        }))
    });
});

// Let's test it
console.log(formattedObj); 

На самом деле вам не нужно переформатировать ваши данные. просто измените свой шаблон на :-

 <div *ngFor="let detail of details|keyvalue"   class="card-body">
<table class="table table-striped">
  <thead>
  <tr>
  <th>  Day </th>
  <th>Duration</th>
  <th> Subject</th>
  <th>Client</th>
  </tr>
  </thead>
  <tfoot>
  <tr *ngFor="let detaill of detail.value">
  <td> <small>{{detaill.day}}</small></td>
  <td> <small>{{detaill.duration}} </small> </td>
  <td><small>{{detaill.subject}}</small> </td>
    <td><small>{{detaill.client}} </small></td>
  </tfoot>