table.html

<div class="form-row container-fluid">
  <table>
    <thead>
    <tr>
      <th>Osoba</th>
      <th>Funkce</th>
      <th>Promo akce</th>
      <th>Typ kontaktu</th>
      <th>Kontakt</th>
      <th>Poznámka</th>
      <th>Použití kontaktu</th>
    </tr>
    </thead>
    <tbody *ngIf="data">
    <tr *ngFor="let item of data.content; let odd=odd" [class.odd]="odd">
      <td [attr.rowspan]="item.customerContactMethods.length">{{item.contactPerson}}</td>
      <td><div *ngFor="let f of item.customerContactFunctions">{{f.contactFunction.key}} </div></td>
      <td><div *ngFor="let p of item.customerContactMethods">{{p.promoInfo}}</div></td>
      <td><div *ngFor="let t of item.customerContactMethods">{{t.contactType.key}}</div></td>
      <td><div *ngFor="let m of item.customerContactMethods">{{m.contactValue.key}}</div></td>
      <td><div *ngFor="let n of item.customerContactMethods">{{n.note}}</div></td>
      <td></td>
    </tr>
    </tbody>
  </table>
</div>


date = {
  "content" : [ {
    "id" : 36670,
    "contactPerson" : "Krausová",
    "customerContactFunctions" : [ {
      "contactFunction" : {
        "key" : "MHO",
        "translation" : "F&B manažer"
      }
    } ],
    "customerContactMethods" : [ {
      "contactType" : {
        "key" : "MOB",
        "translation" : "mobilní číslo"
      },
      "contactValue" : "+421907952431",
      "note" : null,
      "promoInfo" : null,
      "customerContactUsages" : [ ]
    } ]
  }, {
    "id" : 36669,
    "contactPerson" : "Lukáš Endre",
    "customerContactFunctions" : [ {
      "contactFunction" : {
        "key" : "KUC",
        "translation" : "kuchař"
      }
    } ],
    "customerContactMethods" : [ {
      "contactType" : {
        "key" : "MOB",
        "translation" : "mobilní číslo"
      },
      "contactValue" : "+421917512186",
      "note" : null,
      "promoInfo" : null,
      "customerContactUsages" : [ ]
    } ]
  }, {
    "id" : 30145,
    "contactPerson" : "Martin Sucko",
    "customerContactFunctions" : [ {
      "contactFunction" : {
        "key" : "SKU",
        "translation" : "šéfkuchař"
      }
    } ],
    "customerContactMethods" : [ {
      "contactType" : {
        "key" : "MOB",
        "translation" : "mobilní číslo"
      },
      "contactValue" : "+421948449889",
      "note" : "Dolna reštauracia denne menu",
      "promoInfo" : true,
      "customerContactUsages" : [ ]
    }, {
      "contactType" : {
        "key" : "EMA",
        "translation" : "email"
      },
      "contactValue" : "suckomartin@gmail.com",
      "note" : "Dolna prevadzka denne menu",
      "promoInfo" : true,
      "customerContactUsages" : [ {
        "contactUsageType" : {
          "key" : "CIP",
          "translation" : "CIP nabídka"
        }
      }, {
        "contactUsageType" : {
          "key" : "NAL",
          "translation" : "nabídkový list"
        }
      }, {
        "contactUsageType" : {
          "key" : "OBJ",
          "translation" : "objednávka"
        }
      }, {
        "contactUsageType" : {
          "key" : "PRI",
          "translation" : "SMS - čas příjezdu "
        }
      }, {
        "contactUsageType" : {
          "key" : "SOR",
          "translation" : "sortimentní listy"
        }
      }, {
        "contactUsageType" : {
          "key" : "REK",
          "translation" : "reklamace"
        }
      }, {
        "contactUsageType" : {
          "key" : "NAH",
          "translation" : "řešení náhrad, tisk na picking list"
        }
      }, {
        "contactUsageType" : {
          "key" : "NED",
          "translation" : "SMS - nedoručené zboží"
        }
      } ]
    } ]
  }, {
    "id" : 36671,
    "contactPerson" : "Tomaš Sabados",
    "customerContactFunctions" : [ {
      "contactFunction" : {
        "key" : "MAJ",
        "translation" : "majitel"
      }
    } ],
    "customerContactMethods" : [ {
      "contactType" : {
        "key" : "MOB",
        "translation" : "mobilní číslo"
      },
      "contactValue" : "+421903903484",
      "note" : null,
      "promoInfo" : null,
      "customerContactUsages" : [ ]
    } ]
  } ],
  "last" : true,
  "totalPages" : 1,
  "totalElements" : 4,
  "first" : true,
  "sort" : [ {
    "direction" : "ASC",
    "property" : "contactPerson",
    "ignoreCase" : false,
    "nullHandling" : "NATIVE",
    "ascending" : true,
    "descending" : false
  } ],
  "numberOfElements" : 4,
  "size" : 20,
  "number" : 0
}