Question

我正在尝试将数组中的结果显示到html模板中。我需要显示任务对象。目前我可以成功控制日志结果，但是当我尝试显示它时，我得到一个空白的离子列表。我正在从Ionic存储中检索数组。

[
  {
    "projects": {
      "projectname": "test",
      "dateadded": "09 April 2018, 6:29AM",
      "location": "us",
      "tasks": {
        "0": {
          "taskname": "test",
          "taskdescription": "test",
          "taskdealer": "test",
          "tasksupplier": "Technical",
          "taskdeadline": "2018-04-08"
        },
        "1": {
          "taskname": "test",
          "taskdescription": "test",
          "taskdealer": "test",
          "tasksupplier": "Technical",
          "taskdeadline": "2018-04-08"
        }
      }
    }
  }
]

我的尝试

this.storage.get('projectsStore').then(data => {
  for (var i = 0; i < data.length; i++) {
      console.log(data[i].projects.tasks);
      this.tasks = [data[i].projects.tasks];
    }
})

<ion-list>
  <button ion-item no-padding *ngFor="let item of tasks">
    <h2>{{item.taskname}}</h2>
    <p>{{item.taskdeadline}}</p>
  </button>
</ion-list>

Answer 1

你不能重复对象。将其转换为数组，如下所示。它应该像那样工作：

this.storage.get('projectsStore').then(data => {
  for (var i = 0; i < data.length; i++) {
      console.log(data[i].projects.tasks);
      this.tasks = Object.values(data[i].projects.tasks);
    }
})

看看这个小提琴：https://jsfiddle.net/feLnekjb/1/。点击查看重复列表。

离子显示阵列导致模板

1 个答案: