Angular中API响应数据无法在表格显示的问题求助

• this指向错误导致赋值失败
  检查你在subscribe里的赋值代码，如果用了普通function而非箭头函数，this会指向订阅对象而非组件实例，导致组件的categories变量根本没被赋值。比如错误写法：

  this.categoryService.getCategories().subscribe(function(res) {
    this.categories = res; // 这里的this不是组件的this
  });
  

  改成箭头函数就能解决：

  this.categoryService.getCategories().subscribe(res => {
    this.categories = res;
  });
  

• 变量未初始化，异步渲染时机不匹配
  真实API请求是异步的，模板会在组件初始化时先渲染，此时如果categories只声明没初始化（比如categories: Category[];），初始值就是undefined。虽然之后ngOnInit里拿到了数据，但第一次渲染时*ngIf会因undefined不显示表格，后续数据更新可能没触发变更检测。可以先把变量初始化为空数组：

  categories: Category[] = [];
  

  这样模板第一次渲染时categories是个空数组，用*ngIf="categories.length"就能正确等待数据到来后更新。

• 未使用async管道处理异步数据
  课程里的in-memory-web-api是同步模拟数据，直接赋值就能立刻渲染，但真实API是异步流，推荐用async管道自动处理订阅和变更检测。组件里定义Observable变量：

  categories$: Observable<Category[]>;
  
  ngOnInit() {
    this.categories$ = this.categoryService.getCategories();
  }
  

  模板里这样用：

  <table *ngIf="categories$ | async as categories">
    <!-- 遍历categories渲染表格 -->
  </table>
  

  这样Angular会自动等待数据返回，并且在数据更新时自动刷新模板，避免手动订阅带来的各种问题。

• 变更检测策略导致未更新模板
  如果你的组件设置了changeDetection: ChangeDetectionStrategy.OnPush，Angular只会在输入属性变化或组件内触发事件时更新视图。异步请求返回后，categories的变化可能没被检测到，这时候需要手动注入ChangeDetectorRef并调用detectChanges()：

  constructor(private cdr: ChangeDetectorRef) {}
  
  ngOnInit() {
    this.categoryService.getCategories().subscribe(res => {
      this.categories = res;
      this.cdr.detectChanges();
    });
  }
  

  当然更推荐用前面的async管道，它会自动触发变更检测。

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