即使存在于数据存储中，相关对象也不会显示

如何解决即使存在于数据存储中，相关对象也不会显示

我正在学习Ember（3.21），并且对为什么从商店中取回相关项目不会显示为附加到其父模型上感到困惑。我很难在Ember Octane中找到此问题的答案，因为大多数类似的答案都针对较旧的版本，而且似乎没有人遇到这个问题。

对于上下文，我正在创建一个非常简单的待办事项列表应用程序。

在Ember检查器中，我的api返回正确，所有记录都添加到了商店：

我的（JSON）rails api返回数据，如下所示：

{
  "data": {
    "id": "1","type": "todo-lists","attributes": {
      "title": "Test List 1","description": "This is the first test list."
    },"relationships": {
      "todo-item": {
        "data": [
          {
            "id": "1","type": "todo-items"
          },{
            "id": "4",{
            "id": "5",{
            "id": "6",{
            "id": "7",{
            "id": "8",{
            "id": "9",{
            "id": "10",{
            "id": "11",{
            "id": "12",{
            "id": "13","type": "todo-items"
          }
        ]
      }
    }
  },"included": [
    {
      "id": "1","type": "todo-items","attributes": {
        "description": "Test Todo Item 1","completed": false,"deleted": false,"due": "2020-09-19T17:43:10.977Z"
      },"relationships": {
        "todo-list": {
          "data": {
            "id": "1","type": "todo-lists"
          }
        }
      }
    },{
      "id": "4","due": "2020-09-20T01:04:13.861Z"
      },{
      "id": "5","due": "2020-09-20T01:04:29.852Z"
      },{
      "id": "6","attributes": {
        "description": "Test Todo Item 2","due": "2020-09-20T01:04:29.891Z"
      },{
      "id": "7","attributes": {
        "description": "Test Todo Item 3","due": "2020-09-20T01:04:29.927Z"
      },{
      "id": "8","due": "2020-09-20T01:11:29.504Z"
      },{
      "id": "9","due": "2020-09-20T01:11:29.552Z"
      },{
      "id": "10","due": "2020-09-20T01:11:29.589Z"
      },{
      "id": "11","due": "2020-09-21T13:23:00.793Z"
      },{
      "id": "12","due": "2020-09-21T13:23:00.856Z"
      },{
      "id": "13","due": "2020-09-21T13:23:00.884Z"
      },"type": "todo-lists"
          }
        }
      }
    }
  ]
}

待办事项列表模型：

export default class TodoListModel extends Model {
    @hasMany('todoItem') todoItems;
    @attr('string') title;
    @attr('string') description;
}

项目模型：

export default class TodoItemModel extends Model {
    @belongsTo('todoList')  list;
    @attr('string') description;
    @attr('boolean') completed;
    @attr('boolean') deleted;
    @attr('date') due;
    @attr('date') created;
}

因此，我使用余烬数据存储来填充模型 在TodoListsRou​​te中：

model() {
    return this.store.findAll('todo-list');
}

在todo-lists.hbs中：

    {{#each @model as |todoList|}}
       <TodoList @todoList={{todoList}} @delete={{deleteList}}/>
    {{/each}}
    

在todo-list.hbs（称为的自定义组件）中，每个待办事项列表标题/说明均显示正常。 我的问题是我无法在列表下方显示任何待办事项。 这是我尝试执行的代码：

<div class="todo-list-items">
    <div>
        <button class="delete-button" {{on 'click' deleteList}}><i class="fas fa-trash"></i></button>
    </div>
    {{#each @todoList.todoItems as |listItem|}}
    <div>
        {{listItem.id}}
    </div>
    {{/each}}
</div>

将this.args.todoList.todoItems登录到控制台将返回一个完整的类，但是它似乎不包含任何实际的todoItem数据。

任何帮助表示赞赏。

解决方法

注意您的关系名称：在json中，它是“ todo-item”，而在代码中则是“ todoItems”。您应该在json中将其设为“ todo-items”。