Ember.js服务使用问题：页面表格无法显示数据求助

错误排查与修正步骤 #

1. 服务文件路径与命名错误

Ember服务必须放在app/services/目录下（注意是复数services），你当前放在app/service/（单数），框架无法识别该服务。同时服务文件名需遵循kebab-case规范，建议将event_handler.js重命名为event-handler.js，对应服务查找名称为event-handler。

2. 控制器未正确注入服务

你注释掉了@service eventHandler;，导致模板中this.eventHandler无法指向服务实例。取消注释即可完成服务注入，Ember会自动将kebab-case的服务名称转换为驼峰命名：

import Controller from '@ember/controller';
import { service } from '@ember/service';

export default class EventControllerController extends Controller {
  @service eventHandler;
}

3. 模板与控制器属性匹配问题

虽然你在控制器中定义了events getter，但模板未使用该属性，而是直接引用this.eventHandler。完成服务注入后，模板的遍历逻辑即可正常访问服务的eventList数组。

修正后的完整代码 #

服务文件：app/services/event-handler.js

import Service from '@ember/service';

export default class EventHandlerService extends Service {
  eventList = [
    {
      EventName: 'test event 1',
      EventDesc: 'test event 1 desc',
      StartDate: '16.11.2023',
      EndDate: '05.02.2024',
      EventType_ID: 1,
    },
    {
      EventName: 'test event 2',
      EventDesc: 'test event 2 desc',
      StartDate: '17.11.2023',
      EndDate: '15.02.2024',
      EventType_ID: 2,
    },
    {
      EventName: 'test event 3',
      EventDesc: 'test event 3 desc',
      StartDate: '13.10.2023',
      EndDate: '01.01.2024',
      EventType_ID: 1,
    }
  ];
}

控制器文件：app/controllers/event-controller.js

import Controller from '@ember/controller';
import { service } from '@ember/service';

export default class EventControllerController extends Controller {
  @service eventHandler;
}

模板文件

<table>
  <thead>
    <tr>
      <th>Event name</th>
      <th>Event Date Start</th>
      <th>Event Date End</th>
    </tr>
  </thead>
  <tbody>
    {{#each this.eventHandler.eventList as |event|}}
    <tr>
      <td>{{event.EventName}}</td>
      <td>{{event.StartDate}}</td>
      <td>{{event.EndDate}}</td>
    </tr>
    {{/each}}
  </tbody>
</table>

额外建议 #

• 避免使用getOwner(this).lookup手动查找服务，@service装饰器是Ember推荐的服务注入方式，更简洁且能自动处理服务生命周期。
• 检查浏览器控制台报错信息，Ember会输出服务找不到、属性未定义等关键提示，可快速定位问题。

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