ruby-on-rails - Angular 4 和 Rails 5 发布请求 JSON 格式化

Question

我正在使用 Rails 后端开发一个 Angular 应用程序。我在格式化参数散列时遇到问题，以便 Rails 可以使用它。数据是多对多关系，表单包含嵌套属性。在 Rails 中，我的模型使用 accepts_nested_attributes_for 助手。我确切地知道 Rails 期望的格式，但是当我发出 POST 请求时，有一个小细节被关闭了。我将在下面列出两个参数哈希。一个是 Angular 产生的，另一个是 Rails 期望的。

Angular 请求的不足之处在于 Rails 期望在 expense_expense_categories 属性中进行更深层次的嵌套。我一直不明白为什么 Rails 需要它。 Angular 产生的结果对我来说看起来合乎逻辑。我的问题是.. 我需要做什么来格式化 Angular 中的参数？看看我目前所做的，我这样做的方式是否满足 Angular 最佳实践？

Angular :

{
    "expense": {
        "date": "2017/4/13",
        "check_number": "132",
        "debit": "0",
        "notes": "har",
        "amount": "24",
        "payee_id": "334"
    },
    "expense_expense_categories_attributes": [{
            "expense_category_id": "59",
            "amount": 12
        },
        {
            "expense_category_id": "62",
            "amount": 11
        }
    ]
}

Rails 期望什么:

{
    "expense": {
        "date": "2017/12/12",
        "check_number": "122",
        "debit": "0",
        "notes": "har",
        "amount": "24",
        "payee_id": "334",
        "expense_expense_categories_attributes": {
            "210212312": {
                "expense_category_id": "72",
                "amount": "12"
            },
            "432323432": {
                "expense_category_id": "73",
                "amount": "12"
            }
        }
    }
}

我的 Angular 代码如下。

onSubmit() 组件中的方法:

onSubmit() {
    this.expenseService.addExpense(this.expenseForm.value)
      .subscribe(
        () => {
          this.errorMessage = '';
        },
        error =>  {
          this.errorMessage = <any>error;
        }
      );
    this.expenseForm.reset();
  }

在我的服务文件中添加费用:

addExpense(expense: Expense): Observable<any> {
  let headers = new Headers({'Content-Type': 'application/json'});
  let options = new RequestOptions({headers: headers});

  return this.http.post('http://localhost:3000/expenses', expense, options)
    .map(
      (res: Response) => {
        const expenseNew: Expense = res.json();
        this.expenses.push(expenseNew);
        this.expensesChanged.next(this.expenses.slice());
      })
    .catch(this.handleError);
}

我的主要形式:

private initForm() {
    let expense_expense_categories_attributes = new FormArray([]);
    this.expenseForm = this.fb.group({
      id: '',
      date: '',
      amount: '',
      check_number: '',
      debit: '',
      payee_id: '',
      notes: '',
      expense_expense_categories_attributes: expense_expense_categories_attributes
    });
  }

我的嵌套属性的 FormArray:

onAddExpenseCategories() {

(<FormArray>this.expenseForm.get('expense_expense_categories_attributes')).push(
      new FormGroup({
        'expense_category_id': new FormControl(null, Validators.required),
        'amount': new FormControl(null, [
          Validators.required
        ])
      })
    );
  }

更新:我能够让它工作，但我不得不使用一个可怕的正则表达式来操纵请求到我想要的。这是一个非常丑陋的选择，所以我仍然需要找到一个更好的选择。有没有更好的方法来格式化 JSON 对象并替换内容？我不确定正确的方法。需要帮助。

Answer 1

您需要将 expense_expense_categories 添加到 wrap_parameters 中，如下所示:

wrap_parameters :expense, include: [:expense_expense_categories_attributes]

必须将其他属性显式添加到 wrap_parameters，因为它默认只包装模型本身的属性。