Question

在使用Arelia时，我创建了一个带有重复表行的表，并添加了一个绑定到服务的select元素。当我从选择中选择一个选项时，我想用属性对象中的值填充描述字段。我怎么能做到这一点？

看起来我可以使用值转换器 - 当调试器中的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

如果我正确理解了这个问题，那么目标就是选择元素＆＃34;选择＆＃34; 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;
  }
}

更改转发器中选择更改的另一个字段的值

1 个答案: