javascript - ionic 显示阵列导致模板

Question

我正在尝试将数组的结果显示到 html 模板中。我需要显示任务对象。目前我可以成功地通过控制台记录结果，但是当我尝试显示它时，我得到一个空白的 ionic 列表。我正在从 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);
    }
})

看看这个 fiddle :https://jsfiddle.net/feLnekjb/1/ .单击以查看您的列表是否重复。