percorrer lista de JSON vinda do back

olá pessoal, tudo bem? Estou tentando percorrer e exibir um JSON vindo do back e montar um front com : input type='data' , select option ...

visto que é mais complexo, trouxe um exemplo de JSON que levantei com o spring boot e mysql:

[
    {
        "id": 1,
        "dataInicial": null,
        "dataFinal": 1539969967000,
        "empresa": "FORTALEZA",
        "custos": [
            {
                "id": 1,
                "centroCusto": "custo 1"
            },
            {
                "id": 2,
                "centroCusto": "custo custoso"
            }
        ],
        "familia": {
            "id": 1,
            "familia": "familia mundiça"
        }
    },
    {
        "id": 4,
        "dataInicial": 1539970878000,
        "dataFinal": 1539970878000,
        "empresa": "NATAL",
        "custos": [
            {
                "id": 3,
                "centroCusto": "barato demais"
            },
            {
                "id": 4,
                "centroCusto": "pouco caro"
            }
        ],
        "familia": {
            "id": 3,
            "familia": "familia buscapé"
        }
    }
]

Meu componente html:

<form class="form-control container">
  <div >
    <!-- aqui começa a parte das datas-->
    <div class="form-row mb-3">
      <div class="col-md-4">
        <label for ="data-inicio">{{label1}} </label>
        <input class="col-6" id ='data-inicio' type = 'date'>
      </div>
      <div class="col-md-6">
          <label for ="data-fim">{{label2}} </label>
          <input class="col-6" id ='data-fim' type='text' >          
        </div>
    </div>
    <!-- aqui termina a parte das datas-->
    <!-- aqui começa a parte dos comboboxes-->
      <div class="form-row mb-3">
        <div class="col-md-4" >
          <label for ="empresa">{{label3}}</label>
          <select class= "custom-select custom-select-sm" id="empresa">
            <option > {{empresa}} </option>
          </select>
        </div>
        <div class="col-md-4">
          <label for="custo">C.Custo</label>
          <select id="custo" class= "custom-select custom-select-sm">
            <option>{{ custo }}</option>
         </select>
        </div>           
        <div class="col-md-4">
          <label for ="familia">{{label5}} </label>
          <select  class= "custom-select custom-select-sm" id="familia">
            <option value="Todos" selected="selected"> {{familia}} </option>
          </select>
        </div>
      </div>
      <!-- aqui começa a parte dos comboboxes-->
      <!-- aqui temos o botão-->
      <div>
        <button class="btn btn-primary" type="submit">Exportar</button>
      </div>
  </div>
</form>

Component.ts:

import { Component, Input, NgModule } from '@angular/core';
import { OPsService } from 'src/app/ops.service';
import { OP } from 'src/app/op';

@Component ({
    selector: 'app-relatorio',
    templateUrl: 'relatorio.component.html'
})

export class RelatorioComponent {

     label1 = 'Data Início';
     @Input()
     dataInicial = '';

    label2 = 'Data Fim';
     @Input()
     dataFinal = '';

    label3 = 'Empresa';
     @Input()
     empresa = '';

     label4 = 'C.Custo';
     @Input()
     custo = '';

     label5 = 'Familia';
     @Input()
     familia = '';

     @Input()
     listaOP: OP[] = [];

}

serviço

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { OP } from './op';

const uri  = 'http://localhost:8080/ops';

@Injectable({ providedIn: 'root' })
export class OPsService {

    constructor(private http: HttpClient) { }

    listFromUser() {
        return this.http.
        get<OP[]>(uri);
    }
}

app-component:

<app-relatorio
    *ngFor="let op of ops"
        [dataInicial]=  "op.dataInicial"
        [dataFinal]= "op.dataFinal"
        [empresa]= "op.familia"
        [custo]= "op.custo"
        [familia]= "op.familia"
></app-relatorio>