时间戳

首页 > 解决方案 > 如何在 Ember.js 中渲染从计算属性返回的值？

ember.js - 如何在 Ember.js 中渲染从计算属性返回的值？

问题描述

我的组件模板中有以下代码：

      <th scope="row">{{@order.id}}</th>
      <td>Name: {{@order.customer_name}}
      </td>
      <td>Delivery address: {{@order.address}}
          Products in order: {{@order.products}}
          Items: {{items}}
      <td>{{@order.total_price}}$</td>
</tr>

我有我的计算属性，它应该返回并呈现从数据库返回的对象数组中的每个产品名称：

items: computed('order.products', function() {
        let products = this.get('order.products');
        products.forEach(product => {
            for(let i=0; i<products.length; i++){
                return console.log(products[i].name);
            }
        });
    }),

当我运行以下一切正常时，名称显示在控制台中，如下所示：

Cheese on toast
3 Pizza
2 Macaroons bowl

但是，当我尝试删除 console.log 并返回 products[i].name 时，似乎没有返回任何内容。我是否遗漏了某些内容或试图在我的页面上错误地呈现它？

标签： ember.js

解决方案

从片段中，我假设您只想从items计算属性返回产品的名称。如果是这样，那么这里有一些问题是处理循环而不是实际计算的属性。

因此，在您的情况下，您可以使用map从 products 数组中仅过滤掉产品的名称。

items: computed('order.products', function() {
  let products = this.get('order.products');
  let productNames = products.map((product) => {
    return product.name;
  });
  return productNames;
})

此外，计算属性仅保留从定义返回的值。因此，您需要显式返回值，如上面的代码片段 ( return productNames) 所示。

推荐阅读