更改中继器内选定更改的另一个字段的值

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