Comment créer un modèle Angular qui se lie à un autre modèle ?

Question

J'utilise Angular 7 et Rails 5. J'ai ce modèle, src/app/order.ts,

import { Product } from './product';

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

}

puis j'ajoute une commande en utilisant l'appel de service ci-dessous ...

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>

Voici le code HTML utilisé pour ajouter la commande ...

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 !");
    });
  }

}

J'ai mis en place un contrôleur Rails 5 pour faire l'ajout, qui ressemble à ce qui suit ...

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

mais le produit soumis n'est jamais ajouté, malgré le fait que je le sélectionne dans ma liste déroulante. Voici le journal du contrôleur Rails (remarquez qu'il n'y a pas de produit) ...

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)

Dois-je faire quelque chose d'autre dans mon modèle Angular ou mon contrôleur Rails pour m'assurer que le produit est soumis ?

Answer 1

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

vous devez modifier la valeur Secteur

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

car [value] ne fait que suivre la valeur de la chaîne et non celle de l'objet.

Answer 2

Vous pouvez essayer d'utiliser l'événement de changement avec une balise de sélection

 <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>

Code ts:-

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