Вам нужно будет повторно получить данные после добавления нового клиента.
Что-то вроде:
addNewCustomer(customer) {
const customerObj = {
"firstname": customer.firstname,
"lastname": customer.lastname
};
this.http
.post("http://localhost:5555/customers", customerObj)
.pipe(
switchMap(() => this.fetchData())
).subscribe((res:Response) => {
console.log(res);
// not sure if this.showNew is required? leaving it in for completeness
this.showNew = true;
});
}
Обратите внимание, как я повторно вызываю fetchMap изнутри switchMap. switchMap просто означает, что после возвращения первой наблюдаемой, переключитесь на новую наблюдаемую, прежде чем вернуться к телу подписки.
NB - вам не нужно использовать синтаксис function()
в функциях класса.
Редактировать:
И вам потребуется рефакторинг вашего метода fetchData, если вы хотите использовать этот метод.
ngOnInit() {
this.fetchData().subscribe();
}
// TODO: return array of interfaces, like Customer[]
fetchData(): Observable<[]> {
return this.http
.get("http://localhost:5555/customers")
.pipe(
// use map to transform the raw http response into a known type
map(res => res.json())
// use tap to assign the mapped response to a property
tap(customers => this.customers = customers)
);
}
Обычно вызовы http go в какой-то сервис, возвращающий наблюдаемые (не подписки). Затем вы должны подписаться на них в компонентах.
И вообще, лучше иметь дело с интерфейсами, а не передавать нагрузку json объектов вокруг. Вот для чего предназначен тип в машинописи;)