时间戳

首页 > 解决方案 > 如何创建链接到另一个模型的 Angular 模型？

angular - 如何创建链接到另一个模型的 Angular 模型？

问题描述

我正在使用 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 控制器中执行其他操作以确保提交产品？

标签： angularmodelruby-on-rails-5angular7

解决方案

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

 <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];
  }

推荐阅读