Выполнение HTTP-запроса POST с помощью компонента диалога
У меня есть компонент под названием list, который будет отображать некоторые названия заголовков из api, например:
Как показано на изображении, у меня есть fab-button под названием Добавлять. При нажатии на эту fab-кнопку. Я вызываю диалоговое окно (имя компонента - add-customer). нравится:
Теперь из этого диалогового окна я хочу заполнить поля ввода (i, e название и описание) формы, и я хочу опубликовать его на сервере. Это означает, что я хочу отправить запрос http POST при нажатии
Кнопка СПАСТИ.
Я могу вызвать api с помощью метода ПОЛУЧИТЬ, но для метода ПОЧТА я не могу этого сделать.
В add-customer.ts я передаю значения из формы в функцию postCustomer
Я вижу это в консоли:
Я просто хочу знать, как можно назначить эту функцию postCustomer методу POST в файле service.ts.
Я пытаюсь вот так:
public postCustomer(): Promise<IContact[]> {
const apiUrl: string = 'api.........';
return this.http.post<IContact[]>(apiUrl).toPromise();
}
Обратите внимание, что вам не нужно указывать ключевое слово public для всех методов и переменных.
У вас должна быть возможность вызвать HttpClient#post для создания метода POST.
Позвольте мне обновить stackblitz
1. Лучше использовать наблюдаемое вместо обещания. Вы должны передать putContactList данные, которые вы получите в форму после того, как отметите ее как грязную.
Пожалуйста, см. Обновленный ДЕМО. Наблюдая за примером, который я пробовал здесь, я застрял здесь .. :) Нужна помощь.
Я вызвал методы GET и POST внутри файла с именем service.ts.
Ответы 1
Для метода POST:
Для методов POST у вас есть тело для отправки, измените свой сервис на:
public postCustomer(data): Promise<IContact[]> {
const apiUrl: string = 'https://jsonplaceholder.typicode.com/posts';
return this.http.post<IContact[]>(apiUrl, data).toPromise();
}
Затем в вашем AddCustomerComponent проведите рефакторинг вашего метода onAddCustomer(), чтобы:
public onAddCustomer(): void {
this.markAsDirty(this.addCusForm);
this.postCustomer=this.addCusForm.value;
console.info(this.postCustomer);
this.service.postCustomer(this.postCustomer).then(
(response)=> {
console.info('POST called', response);
}
)
}
Не забудьте импортировать свой Service в том же компоненте:
import {Service} from '../service';
И вставьте его в constructor:
constructor(private fb: FormBuilder, private service: Service) { }
ЗАМЕТКА: Я не понимаю, почему вы используете Promises вместо Observables, вы должны изменить их для большей согласованности и мощных операторов.
Спасибо и за руководство к ответу .. :)
Я получаю это предупреждение в файле service.ts: [ts] Ожидается 2–3 аргумента, но получен 1.
На самом деле предупреждение отображается только на существующем stackblitz ДЕМО, пожалуйста, посмотрите один раз .. :)
Значит в файле service.ts.
@PrashanthGH Это уже упоминалось в моем ответе .. (у вас есть тело для отправки ...)
А где код
POST?