如何创建链接到另一个模型的 Angular 模型？答案

【问题标题】：How to create an Angular model that links to another model?如何创建链接到另一个模型的 Angular 模型？
【发布时间】：2019-09-01 17:12:49
【问题描述】：

我正在使用 Angular 7 和 Rails 5。我有这个模型，src/app/order.ts，

import { Product } from './product';

export class Order{
    public id:number;
    public reference:string;
    public product:Product;

}

然后我使用以下服务调用添加订单...

src/app/order-add/order-add.component.html

<form (ngSubmit)="onSubmit()">
    <div class="form-group">
        <label class="col-xs-4 control-label" for="orderProduct">Product: </label>
        <div class="col-xs-8">
              <select [(ngModel)]="order.product" name="orderProduct">
                <option *ngFor="let product of products; let i = index" [value]="products[i].id" [selected]="order !== 'undefined' && products[i].id == order.product?.id">
                  {{product.name}}
                </option>
              </select>
        </div>

        <label class="col-xs-4 control-label" for="orderReference">Order Reference: </label>
        <div class="col-xs-8">
            <input type="text" style="width: 300px" class="form-control" required
                [(ngModel)]="order.reference" name="orderReference">
        </div>
        <div>
                <input type="submit" [value]="order.id !== undefined ? 'Update' : 'Create'" />
        </div>
    </div>
</form>

这是用于添加订单的 HTML ...

src/app/order-add/order-add.component.ts

    ...
  public onSubmit(){
    console.log("Adding an order: " + this.order.reference);
    if(this.order.id){
      this.apiService.update("orders/"+this.order.id,this.order).subscribe((r)=>{
        console.log(r);
        alert("Order updated !");
      })
    }
    else
      this.apiService.post("orders",this.order).subscribe((r)=>{
      console.log(r);
      this.order = new Order();
      alert("Order added !");
    });
  }

}

我设置了一个 Rails 5 控制器来进行添加，如下所示...

class OrdersController < ApplicationController
  before_action :set_order, only: [:show, :update, :destroy]

    ...

  # POST /orders
  def create
    @order = Order.new(order_params)

    if @order.save
      render json: @order, status: :created, location: @order
    else
      render json: @order.errors, status: :unprocessable_entity
    end
  end
    ...

    # Only allow a trusted parameter "white list" through.
    def order_params
      params.require(:order).permit(:reference,:product_id)
    end

但提交的产品从未被添加，尽管我在下拉列表中选择了它。这是 Rails 控制器日志（注意没有产品）...

Started POST "/orders" for ::1 at 2019-09-01 12:01:31 -0500
Processing by OrdersController#create as HTML
  Parameters: {"product"=>"3", "reference"=>"22xxx", "order"=>{"reference"=>"22xxx"}}
   (0.3ms)  BEGIN
  SQL (1.3ms)  INSERT INTO "orders" ("reference", "created_at", "updated_at") VALUES ($1, $2, $3) RETURNING "id"  [["reference", "22xxx"], ["created_at", "2019-09-01 17:01:31.975467"], ["updated_at", "2019-09-01 17:01:31.975467"]]
   (0.4ms)  COMMIT
Completed 201 Created in 16ms (Views: 0.9ms | ActiveRecord: 23.5ms)

我是否需要在我的 Angular 模型或 Rails 控制器中执行其他操作以确保提交产品？

【问题讨论】：

order !== 'undefined' 看起来很奇怪，因为很可能您的意思是 order !== undefined （我更喜欢 order != null）
<select [(ngModel)]="order.product" name="orderProduct"> 是否会按照order_params 的要求转换为product_id？

标签： angular model ruby-on-rails-5 angular7

【解决方案1】：

https://angular.io/api/forms/NgSelectOption

你需要改变价值部门

<option *ngFor="let product of products; let i = index" [ngValue]="product" [selected]="order !== 'undefined' && products[i].id == order.product?.id">
              {{product.name}}
 </option>

因为 [value] 只跟踪字符串值而不是对象。

【讨论】：

试一试，但尽管我在 Rails 日志中看到了参数（例如 'Parameters: {"product"=>{"id"=>4, "name"=>"产品 004", "created_at"=>"2019-08-16T20:26:47.148Z", "updated_at"=>"2019-08-16T20:26:47.148Z"}, "reference"=>"xxxa2", "order"=>{"reference"=>"xxxa2"}}'), 产品没有添加到数据库中, (sql = ' INSERT INTO "orders" ("reference", "created_at", "updated_at" ) 值 ($1, $2, $3) 返回 "id" [["reference", "xxxa2"], ["created_at", "2019-09-04 14:45:50.246580"], ["updated_at", "2019 -09-04 14:45:50.246580"]]')

【解决方案2】：

您可以尝试使用带有选择标签的更改事件

 <select [(ngModel)]="selectedProductIndex" name="orderProduct" (change)="onProductChange(selectedProductId)">
                    <option *ngFor="let product of products; let i = index" [value]="i" [selected]="order !== 'undefined' && products[i].id == order.product?.id">
                      {{product.name}}
                    </option>
                  </select>

ts 代码：-

  selectedProductIndex: number; 
  onProductChange(selectedProductIndex: number) { 
    this.order.product = products[selectedProductIndex];
  }

【讨论】：