Angular 7 api не вызывается
Я пытаюсь вызвать API, но думаю, что что-то не так,
import { map } from "rxjs/operators";
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
export class Message {
constructor(public text: any, public sentBy: any) { }
}
@Injectable()
export class ChatService {
constructor(public http: HttpClient) {
}
public sendMessage(message) {
const usertext = new Message(message, 'user');
console.info("message send",usertext);
return this.http
.post<any>(`http://locahost:3000/api/text_query`, usertext)
.pipe(
map(response => {
return response;
})
);
}
}
Не получается никаких логов в Network tab хрома.
Я использую angular 7.0.1 и машинопись: 3.1.3
Вот мой файл компонента приложения
import {Component, OnInit} from '@angular/core';
import {ChatService} fom './chat.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
message: string;
constructor(private chatService: ChatService) {}
sendMessage() {
this.chatService.sendMessage(this.message).subscribe(res=>{
})
}
ngOnInit() {
}
}
сервис правильно добавлен в файл app.module.ts
нет, я звоню из компонента приложения, и сюда поступают данные, все, что я хочу отправить
Итак, вставьте свою службу в AppComponent и подпишитесь на sendMessage службы в классе appComponent.
Включите код из вашего AppComponent, показывающий, как вы внедрили ChatService в компонент и как вы вызвали метод sendMessage.
отредактировал вопрос
Ответы 3
Вы должны подписаться на наблюдаемое с помощью .subscribe ()
Кстати: почему вы сопоставили одно и то же значение?
map(response => {
return response;
})
Убедитесь, что вы внедрили эту службу ChatService в свой компонент.
ChatService должен быть зарегистрирован как поставщики модуля приложения или того места, где он используется, а затем вы должны подписаться на sendMessage в компоненте, в который внедряется услуга.
Убедитесь, что ваш сервис зарегистрирован в списке поставщиков на app.module или имеет декларацию Injectable вверху:
@Injectable({
providedIn: 'root',
})
Типичный пример службы в angular 7 ниже:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class ChatService{
constructor() { }
}
Методы, предоставляемые HttpClient, обычно возвращают Cold Observable. По сути, это означало бы, что эти методы не будут выполнять никаких вызовов API, если возвращаемые ими Observables не являются subscribed.
Чтобы исправить вашу проблему:
import { map } from "rxjs/operators";
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
export interface Message {
public text: any;
public sentBy: any;
}
@Injectable()
export class ChatService {
constructor(public http: HttpClient) {}
public sendMessage(message) {
const usertext: Message = { text: message, sentBy: 'user' };
return this.http
.post<any>(`http://locahost:3000/api/text_query`, usertext);
}
}
И в вашем компоненте:
...
import { ChatService } from "path-to-chat-service";
@Component({...})
export class ChatComponent {
constructor(private chatService: ChatService) {}
sendMessage(message) {
this.chatService.sendMessage(message)
.subscribe(res => console.info(res));
}
...
}
Полезные ресурсы:
Вы подписываетесь на
sendMessageгде-нибудь в приложении?