如何在 Ember.js 中呈现从计算的属性返回的值？

Question

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

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

而且我有我的计算属性，它应该 return 并在从数据库 return 编辑的对象数组中呈现每个产品名称：

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 和 return products[i].name 时，似乎没有任何内容被 returned。我是否遗漏了某些内容或试图在我的页面上错误地呈现它？

Answer 1

根据代码段，我假设您只想 return 来自 items 计算的属性的产品名称。如果是这样，那么这里有一些问题是循环的处理而不是实际计算的属性。

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

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

此外，计算的属性仅保留从定义中 return 编辑的值。因此，您需要 return 明确显示上述代码段 (return productNames) 中的值。

如何在 Ember.js 中呈现从计算的属性返回的值？

How do I render the values returned from a computed property in Ember.js?

ember.js

如何在 Ember.js 中呈现从计算的 属性 返回的值？

How do I render the values returned from a computed property in Ember.js?

ember.js

如何在 Ember.js 中呈现从计算的属性返回的值？