如何仅将模型 [0] 从 Ember 中的模板传递给组件？

Question

I want to pass only the model[0] (first data element) to a component from the template. I have a route file as follows:

/order.js
export default Route.extend({

  firstIndex: computed('data', {
    get(){
    return Ember.get(this,'data[0]');
    }
  }),

  model(params) {
    return fetch(`/api/salesrowmodel/${params.order_id}`)
    .then(resp => resp.json())
    .then(function(data) {
      return {
        data,
      };
    });
  },
}); 

FirstIndex is a computed property to return first index data of the array. Now in the template, I want to pass the first index data to a component:

/order.hbs

<div class="Revenue-values">{{order-detail data=firstIndex.revenueHeader}}</div>

My sample model data is as follows:

[{
"OrderId": "406-5309498-5972326",
"revenueHeader": {
"Principal": 982.14,
"Product Tax": 117.86,
"Total": 1100
}},
{
"OrderId": "506-5234568-5934567",
"revenueHeader": {
"Principal": 382.54,
"Product Tax": 34.46,
"Total": 234
}}]

It shows the null or undefined object is being passed to order-details. Please help me with this error.

Answer 1

First of all, the template is not bound to the route but to the controller. So you would need to move your computed property to the controller.

Next Ember.get(this,'data[0]'); is invalid. you can not use Ember.get to access a numeric property, and so an array element. The dependency key computed('data', should also probably be computed('data.[]', .

However there is a far simpler approach:

{{order-detail data=model.firstObject}}

because ember adds firstObject and lastObject to arrays.