Oi, boa tarde. Agradeço demais se puder ajudar. Seguem os códigos.
Esse é o meu service
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/empresas';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
})
};
// pois só irei usar para empresa, por isso o root.
@Injectable({ providedIn: 'root' })
export class EmpresarService {
constructor(private http: HttpClient) { }
addEmpresa (novaEmpresa: NovaEmpresa): Observable<NovaEmpresa> {
console.log(novaEmpresa);
return this.http.post<NovaEmpresa>(API_URL + '/add', novaEmpresa, httpOptions);
}
listarEmpresas( ) {
return this.http
.get<NovaEmpresa[]>(API_URL + '.json');
}
}
Meu empresa.component.ts
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],
telefone: ['', Validators.required],
endereco: ['', Validators.required],
responsavel: ['', Validators.required],
email_contato: ['',
[
Validators.required,
Validators.email,
]
]
});
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();
}
}
Meu html
<tbody>
<tr *ngFor="let empresa of empresas$">
<th scope="empresa">
</th>
<td>{{empresa.nome}}</td>
<td>{{empresa.razao_social}}</td>
<td>
<i class="far fa-edit fa-2x cyan-text pr-3"></i>
<i class="far fa-trash-alt fa-2x cyan-text pr-3"></i>
</td>
</tr>
</tbody>
Minha Interface NovaEmpresa
export interface NovaEmpresa {
id: string;
nome: string;
razao_social: string;
telefone: string;
endereco: string;
responsavel: string;
email_contato: string;
}
O JSON que eu recebo.
{
"empresas": [
{
"id": 1,
"nome": "teste insert 01",
"razao_social": "teste razao insert 01",
"telefone": "(85) 99999-9999",
"endereco": "Rua H TEste X",
"responsavel": "teste insert 01",
"email_contato": "teste@mail.com "
},
{
"id": 2,
"nome": "T01",
"razao_social": "R01",
"telefone": "8599999999",
"endereco": "E01 e",
"responsavel": "k01",
"email_contato": "E@01"
}
]
}
O erro que dá:
Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
Com isso, não estou conseguindo mandar os dados para a tabela, pois apresenta este erro. Vi o problema, porém não consigo resolver. Pq se não tivesse o
{
"empresas": [
{
"id": 1,
e fosse apenas
[
{
"id": 1,
demais dados do json
eu conseguiria, porém a API retorna o JSON dessa maneira aí. O que quebra é vir o nome empresas e não o array diretamente. E não sei como tratar isso no Angular.
