为什么Angular中Observable类型的books$用async管道也无法在HTML页面展示数据

首要错误（100%触发你当前问题的根因） #

你在dashbord.component.ts的ngOnInit方法里传参逻辑错误：
你已经通过const id=localStorage.getItem("studentRollno")拿到了学号值，后续调用接口时错误地又把id作为key去localStorage取值，实际传递给后端的参数是null，自然查不到对应数据。

修改后的ngOnInit代码如下：

ngOnInit(): void {
  const id = localStorage.getItem("studentRollno");
  console.log("获取到的学号：", id);
  // 校验id存在后再调用接口，直接传id即可，不需要二次调用localStorage.getItem
  if(id) {
    this.books$ = this.studentservice.getStudentBooks(id);
    // 临时加订阅调试，确认接口返回数据符合预期，调试完可以删掉
    this.books$.subscribe(data => console.log("接口返回数据：", data))
  } else {
    console.error("本地存储中未找到studentRollno字段")
  }
}

其他可能的问题排查点 #

如果修改完上述代码还是无法展示，按以下顺序排查：

• 检查跨域配置：Angular默认启动端口是4200，后端端口是3000，需要后端配置CORS跨域放行，否则浏览器会拦截请求，可打开F12控制台查看是否有CORS相关报错
• 检查接口返回结构：打开F12网络面板，查看getdata接口的请求参数是否是正确的学号，返回的响应体是否为数组，且数组内的对象是否存在name字段，和你定义的Student类型字段是否匹配
• 检查后端查询逻辑：确认BookissuedSchema表中rollno字段的存储类型和传入的id类型一致，比如如果rollno是数字类型，前端传的是字符串类型，会导致MongoDB查询匹配不到数据，可以在后端接口里加console.log(studentRollno, studentBooks)查看实际查询结果
• 检查空数组兼容：如果接口可能返回空数组，可以在HTML里加空状态提示，避免误以为没渲染：

<ul  *ngIf="books$ | async as books" style="list-style-type:none">
  <li *ngIf="books.length === 0">暂无借阅书籍</li>
  <li *ngFor="let item of books">
      <div class="card" style="width: 18rem;">
          <div class="card-body">
              <h5 class="card-title">{{item.name}}</h5>  
          </div>
      </div>
  </li>
</ul>

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