如何通过* ngFor在angular 2打字稿前端显示json数组 [英] how to display json array in angular 2 typescript front end by *ngFor

问题描述

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

Below is angular2 simple front end page::

       <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>

下面是组件代码::其中的Note具有

Below is component code:: in which Note is having

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);

});
}

在此上方.注释输出为::

in above this.notes output is ::

[
  {
    "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前端中显示此数据.

now how to display this data in angular2 front end.

推荐答案

HTML代码::

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

我只是这样做this.notes = JSON.parse(data._body);其余的代码如上所述.

i just did this.notes=JSON.parse(data._body); and worked remaining code is as above.

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);
},

这篇关于如何通过* ngFor在angular 2打字稿前端显示json数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！