Angular存储数据后数据模型二级属性值为undefined如何解决

TypeScript 接口仅在编译阶段做类型校验，编译为 JavaScript 后会被完全擦除，不会自动做字段名映射、大小写转换。你的代码存在三个核心问题：

• 字段名大小写不匹配：API 返回的 JSON 字段全是小写开头（id/note/title等），你定义的接口字段是大写开头（Id/NoteContent/Title等），JS/TS 对象的键名大小写敏感，无法自动匹配
• 字段名不匹配：API 返回的笔记列表字段叫note，你在NoteModel里定义的对应字段叫NoteContent，名称完全对不上
• 逻辑判断bug：条件response.length >= 0恒成立，哪怕接口返回空数组也会进入逻辑取response[0]，会触发空值错误

二选一即可，优先选第一种，改动量最小。

方案1：修改接口定义匹配API返回字段（推荐） #

直接把两个接口的字段名改成和API返回的JSON键完全一致：

1. 修改NoteModel定义：

import { NoteContent } from "./note-content-model"

export interface NoteModel {
    id: number;
    note: NoteContent[];
}

2. 修改NoteContent定义：

export interface NoteContent {
    id: number;
    title: string;
    description: string;
    completed: boolean;
}

3. 修正组件里的取值逻辑和判断条件：

ngOnInit(): void {
  this.noteService.getNotes()
    .subscribe(response => {
      if (response.length > 0) {
        this.notes = response[0];
        console.log(this.notes.note) // 字段名改成和接口一致的note
      }
    });
}

4. 对应修改HTML模板里ngFor遍历的字段名，把原来引用NoteContent、大写开头属性的地方全部改成匹配的小写字段即可正常渲染。

方案2：手动做字段映射（需保留大写开头字段名时使用） #

如果你必须保留自定义的大写字段名，就不能直接把接口返回值赋值给模型，需要在拿到响应后手动逐字段映射转换：

ngOnInit(): void {
  this.noteService.getNotes()
    .subscribe(response => {
      if (response.length > 0) {
        const raw = response[0];
        // 手动映射字段
        this.notes = {
          Id: raw.id,
          NoteContent: raw.note.map(noteItem => ({
            Id: noteItem.id,
            Title: noteItem.title,
            Description: noteItem.description,
            Completed: noteItem.completed
          }))
        };
        console.log(this.notes.NoteContent)
      }
    });
}

内容的提问来源于stack exchange，提问作者Jesus Castañeda