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

我来帮你一步步排查并解决这个问题，主要有几个关键问题需要修正：

1. 模板中的*ngFor变量名错误 #

你的HTML模板里写的是：

<tr *ngFor="let notes of Note">

这里有两个明显的错误：

• 循环的数据源应该是组件里定义的notes数组（小写开头的实例变量），而不是Note类（大写开头的类名）
• 循环项的变量名建议用单数形式note，避免和数组变量notes混淆，提升代码可读性

修正后的模板代码：

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

2. 未正确解析JSON响应数据 #

你的getAllNotes方法里直接把data._body赋值给this.notes，但data._body是JSON字符串格式，不是可以直接遍历的JavaScript对象数组。必须先把它解析成对象数组才能用*ngFor循环：

修正后的组件代码：

getAllNotes(){
  this.noteService.getNotes()
    .subscribe(
      data => {
        console.log("notes get");
        // 第一步：把JSON字符串解析为普通对象数组
        const parsedNotes = JSON.parse(data._body);
        // 第二步：映射为Note类的实例（处理属性名不匹配的问题）
        this.notes = parsedNotes.map(item => {
          const note = new Note();
          note.noteId = item.noteId;
          note.title = item.title;
          note.body = item.body;
          note.color = item.color;
          note.isArchive = item.archive; // 后端返回的是archive，类里定义的是isArchive
          note.isPinned = item.pinned;   // 后端返回的是pinned，类里定义的是isPinned
          note.isTrash = item.trash;     // 后端返回的是trash，类里定义的是isTrash
          return note;
        });
        console.log("notes array");
        console.log(this.notes);
      },
      error => {
        console.log("notes error");
        console.log(error);
      });
}

3. 类属性与返回JSON的字段名不匹配 #

你的Note类定义的属性是isArchive、isPinned、isTrash，但后端返回的JSON字段是archive、pinned、trash，如果不做映射，这些属性会是undefined（虽然不影响当前渲染的title和body，但后续用到这些属性时会出问题）。

如果你不想手动映射，也可以直接修改Note类的属性名和后端返回的一致，这样代码更简洁：

export class Note {
  noteId: number ;
  title: string ; // 建议用小写string，TypeScript里小写是类型，大写是构造函数
  body: string ;
  color: string ;
  archive: boolean ;
  pinned: boolean ;
  trash: boolean ;
}

修改后解析赋值可以简化为：

this.notes = JSON.parse(data._body) as Note[];

额外小建议 #

如果你使用的是Angular的HttpClient模块（而非旧的Http模块），它会自动帮你解析JSON响应，不需要手动调用JSON.parse，代码会更清爽：

getAllNotes(){
  this.noteService.getNotes()
    .subscribe(
      (data: Note[]) => { // 直接指定响应类型
        this.notes = data.map(item => {
          // 处理属性映射（如果类和字段名不一致的话）
          return {
            ...item,
            isArchive: item.archive,
            isPinned: item.pinned,
            isTrash: item.trash
          } as Note;
        });
      },
      error => {
        console.error("notes error", error);
      });
}

按以上步骤修正后，你的*ngFor应该就能正常渲染数据了。

内容的提问来源于stack exchange，提问作者Ragini Patil