提出请求Angular以更新整个对象

Question

我试图做一个请求以更新大对象的请求。 该对象是这样结构化的： 预算

日期和百分比显示的日常goal和百分比显示像这样

用户可以更改输入的百分比，我需要PUT请求来更新整个对象，一旦用户单击“”保存“按钮。

我的service.ts

export class UpdateDailyGoalService {
  constructor(
    private http: HttpClient,
    private StartDateService: StartDateService
  ) {}
  startDate = this.StartDateService.getStartDate();

  year = this.startDate.getFullYear();
  budget: Budget;

  putUrl = 'http://localhost:8080/budgets/{id}';
  getUrl = 'http://localhost:8080/budgets/search';

  getBudgetById(id): Observable<Budget> {
    const headers = new HttpHeaders().append('header', 'value');
    const params = new HttpParams().append('id', id);
    return this.http.get<Budget>(this.getUrl, { headers, params });
  }

  UpdateBudget(id): Observable<Budget> {
    const headers = new HttpHeaders().append('header', 'value');
    const params = new HttpParams().append('id', id);
    return this.http.put<Budget>(this.putUrl, { headers, params });
  }
}

我的component.ts

//get budget by id
getBudgetById(id) {
  this.UpdateDailyGoalService.getBudgetById(id).subscribe((data) => {
    this.budget = data;
    console.log('data' + data);
  });
}

//put request dailygoals into
updateBudget(id) {
  // const data = JSON.stringify(this.budget.id);
  this.UpdateDailyGoalService.UpdateBudget(id).subscribe((data) => {
    this.budget.id = data.id;

    console.log('data id' + data.id);
  });
}

我不知道功能有什么问题，但它不起作用。 我希望你能帮我，谢谢

Answer 1

您必须将整个更新的对象添加到看台上。

服务：

   UpdateBudget(id, updatedData): Observable<Budget> {
    const headers = new HttpHeaders().append('header', 'value');
    const params = new HttpParams().append('id', id);
    return this.http.put<Budget>(this.putUrl, updatedData, { headers, params });
  }

组件：

 //get budget by id
  getBudgetById(id) {
    this.UpdateDailyGoalService.getBudgetById(id).subscribe((data) => {
      this.budget = data;
      console.log('data' + data);
    });
  }

  updateBudget(id, updatedBudget) {
    this.UpdateDailyGoalService.UpdateBudget(id, updatedBudget).subscribe((data) => {
      this.budget.id = data.id;

      console.log('data id' + data.id);
    });
  }