有关使用 JSON 服务器在 Angular 17 中使用 CRUD 操作更新值的问题

Question

当我想要更新存储在 API 中的记录时，路由通过 ActivatedRoute 传递并且在文件中可用，但记录没有显示在我希望用户更新的 HTML 中。我已在下面附上这两个文件以供参考。

更新-car.component.html

<div class="container">
  <form [formGroup]="carUpdateForm" role="form" (ngSubmit)="onClickSubmit(carUpdateForm.value)" class="row g-3">
    <div class="form-group col-md-6"> 
      <label>ID</label>
      <input type="number" class="form-control" formControlName="id" placeholder="Enter ID">
    </div>

    <div class="form-group col-md-6">
      <label>Manufacturer</label>
      <input type="text" class="form-control" formControlName="manufacturer" placeholder="Enter Manufacturer Name">
    </div>

    <div class="form-group col-md-6">
      <label>Model Name</label>
      <input type="text" class="form-control" formControlName="modelName" placeholder="Enter Model Name">
    </div>

    <div class="form-group col-md-6">
      <label>Category</label>
      <input type="text" class="form-control" formControlName="category" placeholder="Enter Category">
    </div> 

    <div class="form-group col-md-6">
      <label>Drivetrain</label>
      <input type="text" class="form-control" formControlName="drivetrain" placeholder="Enter Drivetrain">
    </div>

    <div class="form-group col-md-6">
      <label>Engine</label>
      <input type="text" class="form-control" formControlName="engine" placeholder="Enter Engine">
    </div>

    <div class="form-group col-md-6">
        <label>Transmission</label>
        <input type="text" class="form-control" formControlName="transmisson" placeholder="Enter Transmission">
    </div>

    <div class="form-group col-md-6">
        <label>Max Power</label>
        <input type="number" class="form-control" formControlName="maxPower" placeholder="Enter Amont">
    </div>

    <div class="form-group col-md-6">
        <label>Max Torque</label>
        <input type="number" class="form-control" formControlName="maxTorque" placeholder="Enter Amont">
    </div>

    <div class="form-group col-md-6">
        <label>Kerb Weight</label>
        <input type="number" class="form-control" formControlName="kerbWeight" placeholder="Enter Amont">
    </div>

    <div class="col-12">
      <button [disabled]="!carUpdateForm.valid" type="submit" class="btn btn-primary">Update Car</button>
    </div>
</form>

</div>

更新car.component.ts

import { Component } from '@angular/core';
import { CarsService } from '../../../service/cars.service';
import { ToastrService } from 'ngx-toastr';
import { FormBuilder, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-update-car',
  templateUrl: './update-car.component.html',
  styleUrl: './update-car.component.scss'
})
export class UpdateCarComponent {
  carUpdateForm!: FormGroup;

  updateArray: any;
  routeID: any;

  constructor(private builder: FormBuilder, private carService: CarsService, private route: ActivatedRoute, private toastr: ToastrService) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe((params) => {
      this.routeID = params.get('id');
      console.log(this.routeID);
      this.carService.getSingleCarInfo(this.routeID).subscribe((res) => {
        this.updateArray = res;
        this.carUpdateForm.patchValue(this.updateFormValues());
      });
    });

    this.carUpdateForm = new FormGroup({
      id: new FormControl(this.updateArray.id),
      manufacturer: new FormControl(this.updateArray.manufacturer),
      modelName: new FormControl(this.updateArray.modelName),
      category: new FormControl(this.updateArray.category),
      drivetrain: new FormControl(this.updateArray.drivetrain),
      engine: new FormControl(this.updateArray.engine),
      transmisson: new FormControl(this.updateArray.transmisson),
      maxPower: new FormControl(this.updateArray.maxPower),
      maxTorque: new FormControl(this.updateArray.maxTorque),
      kerbWeight: new FormControl(this.updateArray.kerbWeight)
    });
  }

  onClickSubmit(formdata: any) {
    this.carService.updateCar(this.routeID, formdata).subscribe((val) => {
      this.toastr.success('Car updated successfully');
      setTimeout(() => {
        location.href = '/'
      }, 3000);
    });
  }

  updateFormValues() {
    return {
      id: this.updateArray.id,
      manufacturer: this.updateArray.manufacturer,
      modelName: this.updateArray.modelName,
      category: this.updateArray.category,
      drivetrain: this.updateArray.drivetrain,
      engine: this.updateArray.engine,
      transmisson: this.updateArray.transmisson,
      maxPower: this.updateArray.maxPower,
      maxTorque: this.updateArray.maxTorque,
      kerbWeight: this.updateArray.kerbWeight
    }
  }
}

尝试了所有可能的方法，但仍然没有结果。我正在使用 Angular 17 BTW，并且 SCSS 和 SSR 打开。 请帮我解决这个问题。

Answer 1

在创建 FormGroup 对象之前初始化 updateArray 对象。

constructor() {
  this.updateArray = {
    id: null,
    manufacturer: '',
    modelName: '',
    category: '',
    drivetrain: '',
    engine: '',
    transmisson: '',
    maxPower: null,
    maxTorque: null,
    kerbWeight: null
  }
}