Ändern Sie den Wert eines anderen Felds bei Auswahl ändern innerhalb eines Repeaters

Question

Beim Spielen mit Arelia, erstellte ich eine Tabelle mit einer wiederholenden Tabellenzeile und fügte ein Select-Element an einen Service gebunden. Wenn ich eine Option aus der Auswahl wähle Ich möchte das Beschreibungsfeld mit dem Wert aus dem Eigenschaftsobjekt auffüllen. Wie kann ich das erreichen?

Es sieht so aus, als könnte ich einen Wertkonverter verwenden - wenn ToView im Debugger gefunden wird, kann ich das korrekte Produkt sehen und die Beschreibung sehen. Wie nehme ich dann den Wert und spritze ihn in line.description?

Hier ist ein Beispiel dessen, was ich versuche zu machen:

<template> 
<div class="row"> 
    <div class="col-md-12"> 
     <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h3 class="panel-title"><strong>Summary</strong></h3> 
      </div> 
      <div class="panel-body"> 
       <div class="table-responsive"> 
        <table class="table table-condensed"> 
         <thead> 
          <tr> 
           <td class="col-md-2"><strong>Item</strong></td> 
           <td class="col-md-8"><strong>Description</strong></td> 
           <td class="col-md-2"><strong>Quantity</strong></td> 
          </tr> 
         </thead> 
         <tbody> 
          <tr repeat.for="line of vm.orderLines"> 
           <td> 
            <select class="form-control" value.bind='products[0] | productToId:products'> 
               <option value="">Select a product</option> 
               <option repeat.for="product of products" model.bind="product.id">${product.name}</option> 
            </select> 
           </td> 
           <td> 
            <input class="form-control" value.bind="line.description" placeholder="Description"> 
           </td> 
           <td> 
            <input value.bind="line.quantity" type="number" class="form-control" /> 
           </td> 
          </tr> 
          <tr> 
           <td colspan="3"> 
            <button class="btn btn-default btn-small" click.delegate="addLine()">Add new row</button> 
           </td> 
          </tr> 

         </tbody> 
        </table> 
       </div> 

      </div> 
     </div> 
    </div> 
</div> 

Meine js sieht aus wie

import {HttpClient, json} from 'aurelia-fetch-client'; 
import {ProductService} from '../../services/product-service'; 
import {autoinject} from 'aurelia-framework'; 
import 'fetch'; 
@autoinject(ProductService) 
export class Play { 
heading = 'Playtime'; 
products = []; 
vm = { 
    orderLines: [] 
}; 
selectedProduct = 0; 

constructor(private http: HttpClient, 
    private productService: ProductService) { 
    this.getProducts(); 
    this.addLine(); 
} 

getProducts() { 
    return this.productService.get() 
     .then(response => { 
      this.products = response; 
     } 
     ); 
} 

addLine() { 
    this.vm.orderLines.push(new OrderLine(0, 0, '')); 
} 
} 

export class OrderLine { 
productId: number; 
quantity: number; 
description: string; 

constructor(productId: number, 
    quantity: number, 
    description: string) { 
    this.productId = productId; 
    this.quantity = quantity; 
    this.description = description; 
} 
} 

export class ProductToIdValueConverter { 
toView(product, products, line) { 
    debugger 
    return product ? product.id : null; 
} 
fromView(id, products) { 
    debugger 
    return products.find(u => u.id === id); 
} 
} 

Answer 1

Wenn ich die Frage richtig verstanden habe, ist das Ziel zu haben, Wählen Sie das Element "select" die OrderLine-Instanz productId und description.

Versuchen Sie, wählen Sie den Wert der Bindung an so etwas wie dies zu ändern:

<select class="form-control" value.bind="line | orderLineToProduct:products:line"> 
    <option value="">Select a product</option> 
    <option repeat.for="product of products" model.bind="product">${product.name}</option> 
</select> 

export class OrderLineToProductValueConverter { 
    toView(orderLine, products, orderLine2) { 
    return products.find(p => p.id === orderLine.productId); 
    } 

    fromView(product, products, orderLine) { 
    orderLine.productId = product.id; 
    orderLine.description = product.name; 
    } 
}