如何通过 *ngFor 在 Angular 2 TypeScript 前端显示 JSON 数组

Question

下面是 angular2 简单的前端页面：

       <table class="table">
          <tr>
              <th>title</th>
              <th>description</th>
          </tr>
          <tr *ngFor="let notes of Note">
              <td>{{notes.title}}</td>
              <td>{{notes.body}}</td>
          </tr>
      </table>

下面是组件代码：：其中注释具有

export class Note {
  noteId:  number ; 
  title:  String ;
  body: String ;    
  color:  String ;
  isArchive:  boolean ; 
  isPinned:  boolean ; 
  isTrash: boolean ;
}

notes:Note[]=[];
ngOnInit() {
  this.getAllNotes();
}
//get all anotes
getAllNotes(){
this.noteService.getNotes()
.subscribe(
 // notes => {   //tried not working
 //   this.notes = notes;
 // console.log(notes) },
data => {
  console.log("notes get");
  console.log(data._body);
  this.notes=data._body;
  console.log("notes array");
  console.log(this.notes);
},
error => {
  console.log("notes error");
    console.log(error);
});
}

在上面。注释输出是 ：：

[
  {
    "noteId": 5,
    "title": "hi ",
    "body": "ragini",
    "color": null,
    "createDate": 1515820245951,
    "lastUpdated": 1515820245951,
    "reminder": null,
    "image": null,
    "collaborator": [],
    "labels": [],
    "user": 1,
    "archive": false,
    "pinned": false,
    "trash": false
  },
  {
    "noteId": 8,
    "title": "s",
    "body": null,
    "color": null,
    "createDate": 1515820746348,
    "lastUpdated": 1515820746348,
    "reminder": null,
    "image": null,
    "collaborator": [],
    "labels": [],
    "user": 1,
    "archive": false,
    "pinned": false,
    "trash": false
  }
]

现在如何在 Angular2 前端显示此数据。

Answer 1

您需要使用 notes 而不是Note

<tr *ngFor="let note of notes">
    <td>{{note?.title}}</td>
    <td>{{note?.body}}</td>
</tr>

演示

Answer 2

Html 代码：

<tr *ngFor="let notes of notes; let i = index">
    <td>{{notes.title}}</td>
    <td>{{notes.body}}</td>
</tr>

我只是做了这个.notes=JSON.parse(data._body(; 剩下的代码如上。

data => {
    console.log(data._body);
    this.notes=JSON.parse(data._body); // parsing here
    console.log("notes array"+this.title);
    console.log("Title :: "+this.notes.title);
},