在Ember计算属性中调用模型返回异常数组的问题排查

问题背景 #

我在Ember项目里尝试把模型中的数据格式化后传给图表组件使用，路由和控制器代码如下：

路由代码：

import Route from '@ember/routing/route';
export default Route.extend({
  model() {
    let dateFrom = this.paramsFor('dashboard').dateFrom
    let dateTo = this.paramsFor('dashboard').dateTo
    let hash = {dateFrom, dateTo}
    return Ember.RSVP.hash({
      custakelist: this.get('store').query('custakelist', hash),
      barchart: this.get('store').query('barchart', hash),
    });
  },
  setupController(controller, models) {
    this._super(controller, models);
    controller.set('barchart', models.barchart);
    controller.set('custakelist', models.custakelist);
  },
});

控制器代码：

import Controller from '@ember/controller';
import groupBy from 'ember-group-by';
export default Controller.extend({
  entriesByDate: groupBy('custakelist', 'take_list_date'),
  entriesByAge: groupBy('custakelist', 'patient_age'),
  wardData: Ember.computed.map('entriesByDate', function(group) {
    return { label: group.value, count: group.items.length };
  }),
  ageData: Ember.computed.map('entriesByAge', function(group) {
    return { label: group.value, count: group.items.length };
  }),
  clerkData: Ember.computed.map('barchart', function(barchart) {
    return { label: barchart.label, count: barchart.count };
  }),
});

确认模型已经正确加载，custakelist的数据能正常被其他图表使用，但barchart模型生成的数组里，每个项的label和count都是Computed Property，没有实际值：

0: {label: Computed Property, count: Computed Property}

解决方案 #

这个问题的核心原因是：Ember Data模型的属性本质是计算属性（为实现延迟加载的设计），直接访问barchart.label时，你拿到的是计算属性的引用而非实际存储的值。而custakelist能正常工作，是因为ember-group-by插件内部已经帮你处理了获取属性实际值的逻辑。

你可以通过以下两步解决：

1. 确认Barchart模型的属性定义正确
   确保你的barchart模型里，label和count是用DS.attr正确声明的：

   // app/models/barchart.js
   import Model, { attr } from '@ember-data/model';
   
   export default Model.extend({
     label: attr('string'),
     count: attr('number')
   });
   

2. 修改控制器中的clerkData计算属性
   使用Ember.get()方法显式获取属性的实际值，触发计算属性的getter逻辑：

   clerkData: Ember.computed.map('barchart', function(barchart) {
     return { 
       label: Ember.get(barchart, 'label'), 
       count: Ember.get(barchart, 'count') 
     };
   }),
   

如果你的Ember版本在3.1及以上，也可以使用ES5 getter的写法（本质和Ember.get逻辑一致）：

clerkData: Ember.computed.map('barchart', function(barchart) {
  return { 
    label: barchart.get('label'), 
    count: barchart.get('count') 
  };
}),

这样处理后，clerkData里的每个对象就能拿到barchart模型的实际数据了。

内容的提问来源于stack exchange，提问作者Sorvah