Como iterar sobre objeto em Angular 7?

Olá, boa noite. Sou novo em Angular. Estou desenvolvendo um pequeno projeto em Angular 7, que tenho o seguinte, problema.
Está dando este erro:
"Error trying to diff '[object Object]'. Only arrays and iterables are allowed"
Sei que o erro, é pq o ngfor não pode iterar objetos. Porém, eu não sei como resolver.
O JSON que eu recebo vem neste formato:
{
"empresas": [
{
"id": 1,
"nome": "teste insert 01",
"razao_social": "R0 01"
},
{
"id": 2,
"nome": "T01",
"razao_social": "R01"
}
]
}

Meu service está assim:
import { Injectable } from '@angular/core';
import { NovaEmpresa } from './nova-empresa';
import { HttpClient, HttpHeaders} from '@angular/common/http';
import { Observable } from 'rxjs';

const API_URL = 'http://localhost:3000/emp';

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

constructor(private http: HttpClient) { }
listarEmpresas( ) {
return this.http
.get<NovaEmpresa[]>(API_URL + '.json');
}

}

Meu component está assim:

import { OnInit, Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators, } from '@angular/forms';
import { EmpresarService } from '../empresa.service';
import { NovaEmpresa } from '../nova-empresa';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';

@Component({
selector: 'app-empresa',
templateUrl: './empresa.component.html',
styleUrls: ['./empresa.component.css']
})

export class EmpresaComponent implements OnInit {

formularioEmpresa: FormGroup;
empresas$: Observable<NovaEmpresa[]>;

constructor(
private formBuilder: FormBuilder,
private empresaService: EmpresarService,
private rotas: Router
) { }

ngOnInit() {
this.formularioEmpresa = this.formBuilder.group({
nome: ['', Validators.required],
razao_social: ['', Validators.required]
});

this.listarEmpresas();

}

addEmpresa() {

const novaEmpresa = this.formularioEmpresa.getRawValue() as NovaEmpresa;

this.empresaService.addEmpresa(novaEmpresa)
.subscribe
(
() => this.rotas.navigate(['']),
err => console.log(err)
);

}

listarEmpresas() {
this.empresas$ = this.empresaService.listarEmpresas();
}


}

E minha interface está assim:
export interface NovaEmpresa {
id: string;
nome: string;
razao_social: string;
}

E o meu html assim:
<tbody>
<tr *ngFor="let empresa of empresas$">
<th scope="empresa">
</th>
<td>{{empresa.nome}}</td>
<td>{{empresa.razao_social}}</td>
</tr>
</tbody>

Como faço para corrigir isso?
Não posso mexer na API, apenas no angular.