为什么我在前端 Angular 上的数据在从 api 更新时没有立即更新，我需要刷新页面然后它才会更新？

Question

为什么当我从 api 更新 roomList 时，我的前端 Angular 数据没有立即更新，api 工作正常，结果也在更新，但是，我需要刷新页面然后它才会更新。为什么会这样，我是角度新手，所以不知道如何解决这个问题？ 我正在使用 Angular 版本 17。

在此输入

这是我的 room.component.ts

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;
 });

这是我的服务文件

 updateRooms(id:number,room:RoomList){
    return this.http.put<RoomList>(`/api/hotel/${id}`,room);
  }

我希望单击编辑按钮后数据会立即更新，但它并没有发生，而是当我单击编辑室按钮时没有更新，但当我刷新页面时发生更改显示。 这是我的 rooms.component.ts 文件。

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
{
  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;
   });
    });
  }
updateArray(newitem:RoomList){
  this.roomList[newitem.roomNumber].roomType = newitem.roomType;
  this.roomList[newitem.roomNumber].amenities= newitem.amenities;
  this.roomList[newitem.roomNumber].price = newitem.price;
  this.roomList[newitem.roomNumber].photos = newitem.photos;
  this.roomList[newitem.roomNumber].checkinTime = newitem.checkinTime;
  this.roomList[newitem.roomNumber].checkoutTime = newitem.checkoutTime;
  this.roomList[newitem.roomNumber].rating = newitem.rating;
}
  constructor(@SkipSelf()private roomsService:RoomsService){

  }
  ngAfterViewInit(): void {
    console.log(this.headerComponent);
    // this.headerComponent.title = 'Hello my name is Garima';
    this.headerChildrenComponent.last.title = 'last title';
    this.headerChildrenComponent.get(0);

  }

  ngAfterViewChecked() {
    console.log('after view checked');
  }
  title: string = 'Hotel Amenities';
  stream=new Observable(observer =>{
    observer.next('user1');
    observer.next('user2');
    observer.next('user3');
    observer.complete();
  });
  AddRoom() {
    const extraRoom: RoomList = {
      roomNumber:8,
      roomType: 'Deluxe Room',
      amenities: 'Air Conditioner, Free Wi-fi, TV, Bathroom, Kitchen',
      price: 400,
      photos: 'https://image.jpg',
      checkinTime: '11-Nov-2021',
      checkoutTime: '12-Nov-2021',
      rating: 7,
     
    };
    //this.roomList.push(extraRoom);
    // this.roomList = [...this.roomList, extraRoom];
    // Subscribing to post call and adding the newly creted data to our table
    this.roomsService.addRooms(extraRoom).subscribe((data)=>{
      console.log(data+"the newly added record is....");
      this.roomList = [...this.roomList, data];
    });
  }
  selectedRoom!: RoomList;
  selectRoom(room: RoomList) {
    console.log(room);
    this.selectedRoom = room;
  }
  hideRooms: boolean = true;
  role: any;
  toggle() {
    this.hideRooms = !this.hideRooms;
    this.title = 'Room List Of Rooms Available';
  }
  hotelName: string = 'Rddisson Blue';
  numberOfRooms: number = 10;
  rooms: Room = {
    totalRooms: 20,
    availableRooms: 10,
    bookedRooms: 5,
  };
  ngDoCheck(): void {
    console.log('On change is called...');
  }
  roomList: RoomList[] = [];
  @ViewChild(HeaderComponent) headerComponent!: HeaderComponent;
  ngOnInit(): void {
    this.stream.subscribe({
      next:(value) => console.log(value),
      complete:()=>console.log('complete'),
      error:(err)=>console.log(err),
    });
    this.stream.subscribe((data) => console.log(data));
    this.stream.subscribe((data) => console.log(data));
    console.log(this.headerComponent);
    // 
    console.log(this.roomsService.getRooms());
    this.roomsService.getRooms().subscribe(rooms =>{
      this.roomList=rooms;
     
    });
   
  }
  @ViewChildren(HeaderComponent)
  headerChildrenComponent!: QueryList<HeaderComponent>;
}
[![This is how my frontend looks](https://i.stack.imgur.com/eImmJ.png)](https://i.stack.imgur.com/eImmJ.png)

Answer 1

尝试使用2路绑定。当变量更新时，这将更新前端中的数据，即 [(ngModel)]。如果需要更多信息或者它不起作用，请告诉我。