Angular中ng-model绑定按钮及HTTP请求数据时的错误排查求助

以下是你的代码中存在的问题及对应修复方案：

一、component.html 中的问题与修复 #

• 双向绑定语法错误：ngModel 需要使用双向绑定语法 [(ngModel)]，而非单向事件绑定 (ngModel)，否则无法将输入值同步到组件变量。
• 输入框类型笔误：Name 输入框的 type="test" 是错误写法，应改为 type="text"（Create 和 Update 模块的 Name 输入框均存在此问题）。
• 点击事件引号冲突：按钮 click 事件中传递对象时，外层已使用双引号，内部属性需改用单引号，否则会触发 HTML 语法解析错误。
• 标题标签语法错误：Update 模块的标题 <h1>Update</h1> Product</h1> 多了一个闭合标签，应合并为 <h1>Update Product</h1>。

修复后的 component.html：

<h1>Products:</h1>
<h1>{{products|json}}</h1>
<h1>Create Product</h1>

Id:<input type="number" [(ngModel)]="id"/><br/>
Name:<input type="text" [(ngModel)]="name"/><br/>
Description:<input type="text" [(ngModel)]="description"/><br/>
Price:<input type="number" [(ngModel)]="price"/><br/>
<button (click)="createProduct({'id':id,'name':name,'description':description,'price':price})">
  Create
</button>

<h1>{{createResponse|json}}</h1>

<h1>Update Product</h1>

Id:<input type="number" [(ngModel)]="id1"/><br/>
Name:<input type="text" [(ngModel)]="name1"/><br/>
Description:<input type="text" [(ngModel)]="description1"/><br/>
Price:<input type="number" [(ngModel)]="price1"/><br/>
<button (click)="updateProduct({'id':id1,'name':name1,'description':description1,'price':price1})">
  Update
</button>

<h1>{{updateResponse|json}}</h1>

<h1>fetch Product</h1>

Id:<input type="number" [(ngModel)]="id2"/><br/>
<button (click)="getProduct(id2)">
  GetProduct
</button>
<h1>{{getProductResponse|json}}</h1>

二、component.ts 中的问题与修复 #

• 接口调用错误：getProduct 方法中错误调用了 this._service.update(id)，应改为调用服务中的 getProduct(id) 方法。
• 响应变量权限问题：createResponse、updateResponse、getProductResponse、deleteResponse 被定义为 private，导致 HTML 模板无法访问这些变量，需改为 public。
• 类型优化（可选）：将 id、price 等变量类型从 any 改为更明确的 number/string，提升代码类型安全性。

修复后的 component.ts：

import { Component } from '@angular/core';
import { ProductDataService } from './services/product-data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public products: any;
  public id: number;
  public name: string;
  public description: string;
  public price: number;
  public createResponse: any;
  public updateResponse: any;
  public id1: number;
  public name1: string;
  public description1: string;
  public price1: number;
  public getProductResponse: any;
  public id2: number;
  public deleteResponse: any;
  public id3: number;

  constructor(private _service: ProductDataService) {}

  ngOnInit() {
    this._service.getProducts().subscribe((res: any) => {
      this.products = res;
    });
  }

  public createProduct(product: any) {
    this._service.create(product).subscribe((res: any) => {
      this.createResponse = res;
    });
  }

  public updateProduct(product: any) {
    this._service.update(product).subscribe((res: any) => {
      this.updateResponse = res;
    });
  }

  public getProduct(id: number) {
    this._service.getProduct(id).subscribe((res: any) => {
      this.getProductResponse = res;
    });
  }

  public deleteProduct(id: number) {
    this._service.delete(id).subscribe((res: any) => {
      this.deleteResponse = res;
    });
  }
}

三、ProductDataService 中的潜在问题 #

• PUT 请求 URL 适配：通常更新单个资源的 PUT 请求需要拼接资源 ID，若你的后端接口要求 PUT 到 http://localhost:8080/api/products/{id}，则需修改 update 方法：

public update(product: any): any {
  return this._httpClient.put(`${this.url}${product.id}`, product);
}

（若后端接受 PUT 到基础 URL 并通过请求体传递 ID，则无需修改）

内容的提问来源于stack exchange，提问作者jiggu Reddy