Angular 6中使用*ngFor渲染数据无内容问题求助

我来帮你一步步排查这个问题，通常这种情况都是数据结构、异步处理或者组件属性声明的问题，咱们逐个验证：

1. 先确认数据结构是否匹配*ngFor的要求 #

*ngFor只能遍历数组类型的数据，如果你的obj不是直接的数组（比如从接口返回的是包含数组的对象，像你提供的图片里的数据看起来是包裹在某个属性里的数组），直接把obj赋值给myData就会导致遍历失败。

• 先在app.component.ts里加一行console.log(obj)，看看打印出来的结构。如果obj里的目标数组是在data属性下（比如obj.data才是你要的数组），那得改成：

  this.myData = obj.data; // 替换成实际的数组属性名
  

• 也可以在模板里临时加一行{{myData | json}}，直接在页面上查看myData的实际结构，确认它是不是一个数组。

2. 处理异步赋值的情况 #

如果obj是通过HTTP请求、定时器或者其他异步操作获取的，那可能你赋值的时候数据还没返回，导致初始的myData是空的，后续数据回来后没触发变更检测或者赋值方式不对。

• 如果是HTTP请求，正确的做法要么是订阅后赋值：

  import { HttpClient } from '@angular/common/http';
  
  constructor(private http: HttpClient) {}
  
  ngOnInit() {
    this.http.get('你的接口地址').subscribe(res => {
      // 同样要注意res的结构，取到对应的数组
      this.myData = res.data;
    });
  }
  

• 要么用async管道（更推荐，不用手动订阅）：

  // app.component.ts
  import { HttpClient } from '@angular/common/http';
  import { Observable } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  myData$: Observable<any[]>;
  
  constructor(private http: HttpClient) {}
  
  ngOnInit() {
    this.myData$ = this.http.get('你的接口地址').pipe(
      map(res => res.data) // 映射到实际的数组属性
    );
  }
  

  然后模板改成：

  <ul>
    <li *ngFor="let data of myData$ | async">{{data.id}}</li>
  </ul>
  

• 另外，建议在声明myData的时候初始化一个空数组，避免报错：

  myData: any[] = [];
  

3. 确保myData是组件的公共属性 #

Angular模板只能访问组件类的公共属性，如果myData被声明为private，模板就拿不到数据：

• 错误写法：

  private myData: any[];
  

• 正确写法（默认就是public，也可以显式声明）：

  public myData: any[] = [];
  // 或者省略修饰符
  myData: any[] = [];
  

4. 手动触发变更检测（针对非Angular异步操作） #

如果你的赋值操作是在Angular之外的异步回调里（比如原生setTimeout、第三方JS库的回调），Angular的变更检测可能不会自动触发，导致页面不更新：

• 可以注入ChangeDetectorRef手动触发：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 在赋值后调用
  this.myData = obj.data;
  this.cdr.detectChanges();
  

• 或者把赋值操作放到Angular的Zone里：

  import { NgZone } from '@angular/core';
  
  constructor(private zone: NgZone) {}
  
  this.zone.run(() => {
    this.myData = obj.data;
  });
  

按照上面的步骤排查，应该就能解决问题了。

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