2

Galera, preciso de ajuda com o Angular 4... preciso consumir uma api (json-server)... para testes, coloquei o conteúdo do Json direto no código, da forma abaixo... mas agora preciso substituir isso pelo endereço da api (localhost:porta/comunicado).

Alguém pode me dizer como fazer isso?

Já está tudo configurado. Só preciso saber como inserir o endereço do servidor. Estou pesquisando desde 5h da manhã mas sem resultados.

Agradeço quem puder me dar uma orientação.

import { HttpClient } from "@angular/common/http"
import { Injectable } from '@angular/core'
import { Comunicados } from './shared/comunicados.model'

@Injectable()
export class ComunicadosService {

constructor(private http: HttpClient){}

public comunicados: Comunicados[] = [
    {
"id": 1,
"title": "Titulo",
"seen": false,
"type": 0,
"description": "descricao.",
"fullDescription": "AAA",
"date": "2013-05-03 8:30"
 },
}

public getComunicados(): Array<Comunicados> {
    return this.comunicados
}
}
6
  • 2
    onde está o seu código para fazer a chamada ajax? Commented 11/05/2018 às 16:55
  • Obrigado pela resposta, @RicardoPontual Este é o conteúdo do arquivo do módulo: pastebin.com/zx87Jegv Commented 11/05/2018 às 16:59
  • 1
    Bruno, se tiver também a parte de javascript que faz a chamada para o serviço ajuda a entendermos o que não está funcionando Commented 11/05/2018 às 17:05
  • Na verdade estou usando TypeScript, Ricardo. O código acima já funciona com os dados do json inseridos. Porém preciso remover esse json que colei e usar uma URL de uma Api Fake, entende? Commented 11/05/2018 às 17:07
  • 1
    Então, "mas agora preciso substituir isso pelo endereço da api" para fazer isso você precisa de uma chamada ajax, você até já injetou a dependência do HttpClient mas está faltando usar para chamar a api, isso falta no seu código Commented 11/05/2018 às 17:14

2 Respostas 2

3

Após um pouco mais de pesquisa e lida com atenção na documentação do A4, resolvido com:

(...)
import { END_API } from '../app.api'
import 'rxjs/add/operator/map'

@Injectable()
export class ComunicadosService {

constructor(private http: HttpClient){}

comunicados(): Observable<Comunicado[]> {
    return this.http.get<Comunicado[]>(`${END_API}/link`);
}
}

Obrigado ao Lucas e Ricardo, que ajudaram muito! 🤝

1
  • 1
    faltou a utilização do subscribe(), segundo a documentação do angular nenhuma requisição http é chamada até a utilização dessa função. Commented 19/05/2018 às 17:16
2

Você pode fazer a requisição assim:

http.get(insere a url da api aqui)
.map(res => res.json())
.subscribe(data => console.log(data));
2
  • Opa! Valeu pela resposta, Lucas! =) Pelo que pude compreender por aqui, o .map(...) não é mais usado. Commented 12/05/2018 às 5:44
  • A utilização do map é relativa. Realmente não é uma obrigatoriedade hehe. Commented 14/05/2018 às 11:03

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .