更改中繼器內選定更改的另一個字段的值

Question

在與Arelia一起玩耍時，我創建了一個包含重複表格行的表格，並添加了綁定到服務的選擇元素。當我從select中選擇一個選項時，我想用屬性對象的值填充description字段。我怎樣才能做到這一點？

它看起來像我可以用一個價值轉換器 - 當toView在調試器中被擊中，我可以看到正確的產品，看到了描述。那麼，我如何獲取價值並將其注入line.description？

這裏是我想要做一個樣本：

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

我的JS貌似

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

如果我理解正確的問題，我們的目標是有選擇元素「選擇」OrderLine實例的productId和description。

試着改變你的選擇的價值結合到這樣的事情：//計算器：

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