Angular *ngFor渲染失败：Cannot find a differ supporting object错误排查

看起来你遇到的问题主要来自两个地方：HttpClient自动解析JSON的特性，以及没有正确处理服务器返回的响应结构。让我一步步帮你解决：

1. 为什么会出现"res.json is not a function"错误？ #

Angular 4及以后的HttpClient模块会自动将响应体解析为JSON对象，不需要再手动调用.json()方法。你之前尝试的.map(response => response.json().todos)是旧Http模块的用法，在HttpClient下自然会报错。

2. 正确处理服务器响应结构 #

根据你提供的服务器返回格式（注意你的JSON示例有语法错误，todos应该是数组而非多个对象直接罗列，正确格式见下方），服务器返回的是一个包含success状态和todos数组的对象，而非直接返回待办列表数组。所以你的ListService需要先提取响应中的todos字段：

修改list.service.ts的getAllTodos方法： #

getAllTodos(): Observable<List[]> {
  // 先指定响应的类型：包含success和todos数组的对象
  return this.http.get<{success: boolean, todos: List[]}>('http://localhost:3000/todos/lists')
    .map(response => {
      // 直接提取todos数组返回
      return response.todos;
    });
}

这里的关键是：HttpClient返回的response已经是解析后的JSON对象，你可以直接访问response.todos拿到待办列表数组。

3. 优化组件中的订阅逻辑（可选但推荐） #

在DashboardComponent中，建议给lists初始化一个空数组，避免模板渲染时因为lists为undefined导致的错误，同时添加错误处理：

修改dashboard.component.ts： #

export class DashboardComponent implements OnInit { 
  user: Object; 
  lists: List[] = []; // 初始化空数组，避免渲染时undefined报错
  @Input() input; 
  @Output() update = new EventEmitter(); 

  constructor( 
    private authService: AuthService, 
    private flashMessage: FlashMessagesService, 
    private listService: ListService 
  ) { } 

  ngOnInit() { 
    this.getLists(); 
    this.authService.getProfile().subscribe(profile => { 
      this.user = profile.user; 
    }, err => { 
      console.log(err); 
      return false; 
    }); 
  } 

  getLists(): void { 
    this.listService.getAllTodos() 
      .subscribe(
        lists => this.lists = lists,
        err => {
          console.error('加载待办列表失败:', err);
          this.flashMessage.show('加载失败，请稍后重试', {cssClass: 'alert-danger', timeout: 3000});
        }
      ); 
  }
}

4. 确认服务器返回的JSON格式正确性 #

你提供的JSON示例有语法错误，todos字段的值应该是数组（用[]包裹），正确格式如下：

{ 
  "success": true, 
  "todos": [
    { "_id": "5b0dc32d1f6fa0f48ca7d374", "item": "test", "completed": false, "__v": 0 }, 
    { "_id": "5b0dc3b11f6fa0f48ca7d375", "item": "1234", "completed": false, "__v": 0 }, 
    { "_id": "5b0dc4ae1f6fa0f48ca7d376", "item": "示例待办", "completed": true, "__v": 0 }
  ]
}

如果服务器返回的todos是单个对象而非数组，*ngFor是无法遍历的，这也会导致渲染失败，请确认后端接口的返回格式。

5. 模板中的*ngFor示例 #

最后确保你的HTML模板中*ngFor的用法正确，比如：

<ul>
  <li *ngFor="let todo of lists">
    {{ todo.item }} - {{ todo.completed ? '已完成' : '未完成' }}
  </li>
</ul>

按照以上步骤修改后，应该就能正常渲染服务器返回的待办数据了。

内容的提问来源于stack exchange，提问作者Cuong Vo