Why is my front-end Angular data not updating instantly when I update the roomList from the API? The API is functioning correctly and the results are being updated, but I have to refresh the page for the changes to show. As a newcomer to Angular, I am struggling to figure out how to solve this issue. I am working with Angular version 17.
This code snippet can be found in my room.component.ts file:
update() {
const extraRoom: RoomList = {
roomNumber:2,
roomType: 'tory',
amenities: 'Gas,CoolerKitchen',
price: 300,
photos: 'https://imagfine.jpg',
checkinTime: '17-09-2002',
checkoutTime: '02-Nov-2021',
rating: 1,
};
this.roomsService.updateRooms(extraRoom.roomNumber,extraRoom).subscribe((data)=>{const idx=data.roomNumber;
this.roomList.forEach((value,index)=>{
// this.updateArray(data);
// this.roomList.push(extraRoom);
this.roomList[data.roomNumber].roomType =data.roomType;
this.roomList[data.roomNumber].amenities= data.amenities;
this.roomList[data.roomNumber].price =data.price;
this.roomList[data.roomNumber].photos = data.photos;
this.roomList[data.roomNumber].checkinTime = data.checkinTime;
this.roomList[data.roomNumber].checkoutTime = data.checkoutTime;
this.roomList[data.roomNumber].rating = data.rating;
});
The service file responsible for handling updates looks like this:
updateRooms(id:number,room:RoomList){
return this.http.put<RoomList>(`/api/hotel/${id}`,room);
}
Despite my expectations of immediate data updates upon clicking the edit button, the changes only appear after I manually refresh the page. This behavior is not what I intended, and it's hindering the user experience.
This section relates to my rooms.component.ts file:
import {
AfterViewChecked,
AfterViewInit,
Component,
DoCheck,
OnInit,
QueryList,
SkipSelf,
ViewChild,
ViewChildren,
} from '@angular/core';
import { Room, RoomList } from './rooms';
import { CommonModule } from '@angular/common';
import { RoomsListComponent } from '../rooms-list/rooms-list.component';
import { HeaderComponent } from '../header/header.component';
import { RoomsService } from './services/rooms.service';
import { Observable } from 'rxjs';
@Component({
selector: 'hinv-rooms',
standalone: true,
templateUrl: './rooms.component.html',
styleUrl: './rooms.component.scss',
imports: [CommonModule, RoomsListComponent, HeaderComponent],
})
export class RoomsComponent
implements DoCheck, OnInit, AfterViewInit, AfterViewChecked
{
// Room component logic here
}
[](https://i.sstatic.net/eImmJ.png)