Angular 5中Subscribe无法将数据赋值给qMList问题求助

首先看你贴的代码片段，subscribe里的赋值语句明显没写完——这大概率是第一个问题！先把赋值补全，直接把返回的res赋值给qMList，同时加上错误处理避免默默失败：

getQuestions() {
  this.getOsz().subscribe(
    res => {
      this.qMList = res;
      console.log('赋值完成:', this.qMList); // 这里打印确认数据是否正确接收
    },
    error => {
      console.error('请求出错了:', error); // 一定要加错误回调，排查请求是否真的成功
    }
  );
}

补全后如果还是有问题，那大概率是异步操作的时机问题——Observable的订阅是异步的，如果你在调用getQuestions()之后立刻去访问qMList，这时候数据还没从后端返回，自然是undefined。举个错误的例子：

// 错误用法：调用后直接访问，此时订阅还没完成
questionService.getQuestions();
console.log(questionService.qMList); // 这里肯定是undefined

解决这个问题有两种常用方式：

• 方式一：所有依赖qMList的逻辑都放在subscribe的回调里执行，确保数据已经返回
• 方式二：把qMList改成Observable类型，直接让组件通过async管道订阅，这是Angular里更推荐的做法：

  // 修改服务代码
  @Injectable()
  export class QuestionService {
    public qMList$: Observable<QuestionMaster[]>; // 改成Observable类型
    constructor(private http: HttpClient) { }
  
    getOsz(): Observable<QuestionMaster[]> {
      return this.http.get<QuestionMaster[]>("http://localhost:7073/api/values");
    }
  
    getQuestions() {
      this.qMList$ = this.getOsz(); // 直接把Observable赋值给qMList$
    }
  }
  
  // 组件模板里用async管道自动处理订阅和取消订阅
  <div *ngFor="let question of questionService.qMList$ | async">
    <!-- 渲染数据 -->
  </div>
  

另外还有个小细节：你声明qMList的时候没有初始化，默认是undefined。可以先初始化为空数组，避免一开始就出现undefined：

public qMList: QuestionMaster[] = [];

最后再检查下QuestionMaster接口的结构是否和后端返回的数据完全匹配，如果字段不匹配，也可能导致赋值后数据异常（不过这种情况一般不会是undefined，而是空数组或者字段缺失）。

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