Создайте динамическую таблицу из объекта JSON, используя директивы Angular 5 - PullRequest
Новая
       32

Создайте динамическую таблицу из объекта JSON, используя директивы Angular 5

0 голосов
/ 08 мая 2018

Можно ли создать динамическую таблицу (динамические столбцы) на основе объекта JSON с директивами Angular 5 / Или с помощью jQuery? Если так, то как?

Допустим, я получил ответ JSON от REST API: 

{
      name: "Ferrari"
      country: "Italy",
      creater: "Enzo Ferrari"
      cars: [
        {
          modell: "Ferrari 488",
          price: "215.683€"
        },
        {
          modell: "Ferrari Portofino",
          price: "189.704€"
        }
     ]
    }

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

+-----------+----------+--------------+--------------+------------+--------------------+-------------+
| Name      | Country  | Creater      | Modell       | Price      | Modell             | Price       |
+-----------+----------+--------------+--------------+------------+----------------------------------+
|  Ferrari  | Italy    | Enzo Ferrarie| Ferrarie 488 | 189.704€   | Ferrarie Portofino | 189.704€    |
+-----------+----------+--------------+--------------+------------+--------------------+-------------+

Каков наилучший подход для решения этой проблемы? Я просто не могу понять, как решить эту проблему? Любая помощь очень ценится.

1 Ответ

0 голосов
/ 08 мая 2018

Если у вас есть только один объект в таблице (имеется в виду одна строка заголовка и одна строка данных), вы можете сделать что-то вроде этого: 

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Country</th>
      <th>Creater</th>
      <ng-template ngFor [ngForOf]="data.cars">
        <th>Modell</th>
        <th>Price</th>
      </ng-template>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ data.name }}</td>
      <td>{{ data.country }}</td>
      <td>{{ data.creater }}</td>
      <ng-template ngFor let-car [ngForOf]="data.cars">
        <th>{{ car.modell }}</th>
        <th>{{ car.price }}</th>
      </ng-template>
    </tr>
  </tbody>

</table>

Вы можете использовать ng-template и директиву ngFor для обхода автомобилей.

Важное замечание: Если у вас несколько строк данных, вам необходимо преобразовать данные, чтобы всегда отображать одинаковое количество столбцов, в противном случае HTML-код будет разбит.

...