Angular组件中从Observable取值实现预订ID自增方案

你当前代码的核心问题是对Angular Observable异步逻辑的处理错误：

• 类属性位置写的bookings = this.bookingService.getBookings().subscribe(...)拿到的是RxJS订阅对象，不是接口返回的预订列表数据
• Observable是异步执行的，你在类初始化阶段给booking硬编码id:999的时候，接口请求还没返回，自然没法拿到最大ID计算新值
• 原save方法的跳转逻辑写在subscribe外，会出现新增请求还没完成就跳页的问题

不需要修改booking.service.ts的现有代码，只需要调整create-booking.component.ts的逻辑，把新预订ID的计算放到接口请求的subscribe回调里执行即可，修改后的完整组件代码如下：

import { Component, OnInit } from '@angular/core';
import {Booking} from "../booking";
import {Router, ActivatedRoute} from "@angular/router";
import {BookingService} from "../booking.service";

@Component({
  selector: 'app-create-booking',
  templateUrl: './create-booking.component.html',
  styleUrls: ['./create-booking.component.css']
})
export class CreateBookingComponent implements OnInit {

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private bookingService: BookingService) { }

  booking!: Booking;

  ngOnInit(): void {
    // 编辑预订场景保持原有逻辑
    if(this.router.url !== "/createBooking"){
      const id = Number(this.activatedRoute.snapshot.paramMap.get('id'));
      this.bookingService.getBookingById(id).subscribe(result => {
        this.booking = result;
      });
      return;
    }

    // 新建预订场景：拉取全量预订数据计算最新ID
    this.bookingService.getBookings().subscribe(bookingList => {
      // 无预订记录时默认ID从1开始，有记录时取最大ID+1
      const nextId = bookingList.length === 0 ? 1 : Math.max(...bookingList.map(item => item.id)) + 1;
      this.booking = {
        id: nextId,
        name: "Your Name",
        roomNumber: 100,
        startDate: new Date(),
        endDate: new Date(),
      }
    })
  }

  save(): void{
    this.bookingService.addBooking(this.booking).subscribe(() => {
      // 等新增请求成功后再跳转列表，避免请求未完成就跳页
      this.router.navigate(['bookings']);
    });
  }

  dateChanged(event: Event, isStart: boolean){
    const val = (event.target as HTMLInputElement).value;
    isStart ? this.booking.startDate = new Date(val) : this.booking.endDate = new Date(val);
  }

}

• 删除类属性位置错误的全局subscribe代码，避免无意义的订阅泄露
• 把新预订对象的初始化逻辑挪到getBookings的subscribe回调内，保证拿到全量数据后再计算ID
• 用Math.max配合数组map快速提取最大ID，不需要手写遍历逻辑
• 调整save方法的跳转时机，等新增接口返回成功后再执行路由跳转
• 移除原代码的@ts-ignore，用TS非空断言!声明booking属性，规避类型报错

内容的提问来源于stack exchange，提问作者Verunsicherungs Vertreter