为什么我无法在我的 HTML 页面中显示 Observable 数据？答案

【问题标题】：Why I am unable to display Observable data in my HTML page?为什么我无法在我的 HTML 页面中显示 Observable 数据？
【发布时间】：2021-11-15 14:51:29
【问题描述】：

dashbord.component.ts 当我在 books$ 中获取数据时： Observable 但我无法在 HTML 中显示

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import {Student} from '../models/student'
import {StudentService} from '../services/student.service'

@Component({
  selector: 'app-dashbord',
  templateUrl: './dashbord.component.html',
  styleUrls: ['./dashbord.component.css']
})
export class DashbordComponent implements OnInit {

  books$ : Observable<Student[]>
  constructor(private studentservice:StudentService) { }

  ngOnInit(): void {
    const id=localStorage.getItem("studentRollno");
    console.log(id);
    this.books$=this.studentservice.getStudentBooks(localStorage.getItem(id));
    console.log(this.books$);
  }

}

HTML 这是我使用 Pipe 作为异步但仍然无法在 html 页面中显示数据的 HTML 代码。如果可能，请帮忙。

<ul  *ngIf="books$ | async as books" style="list-style-type:none">
    <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>

我在 service.ts 文件中调用它我从这里获取数据

getStudentBooks(id) : Observable<Student[]>{
     return this.http.get<Student[]>(`http://localhost:3000/student/getdata/${id}`);
  }

在后端的节点文件中我使用

router.get('/getdata/:id', async (req, res) => {
  const studentRollno=req.params.id;
  try {
    const studentBooks = await BookissuedSchema.find({rollno:studentRollno});
    res.send(studentBooks);
  } catch (error) {
    res.send(error); 
  }
})

可能的话请帮忙

【问题讨论】：

我假设您也没有收到任何错误消息？因为据我所知，您目前正在忽略任何出现的错误。
看起来您没有从 API 获得预期的响应。记录你的结果并检查。

标签： angular rxjs-observables

【解决方案1】：

两件事：

this.studentservice.getStudentBooks(localStorage.getItem(id)); 看起来不对，应该改成this.studentservice.getStudentBooks(id) 吗？；
您正在破坏性地重新分配 observable oninit，但分配只需要在组件创建时发生一次。将该逻辑移至构造函数。

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import {Student} from '../models/student'
import {StudentService} from '../services/student.service'

@Component({
  selector: 'app-dashbord',
  templateUrl: './dashbord.component.html',
  styleUrls: ['./dashbord.component.css']
})
export class DashbordComponent implements OnInit {

  public readonly books$: Observable<Student[]>

  constructor(private readonly studentservice: StudentService) {
    const id = localStorage.getItem("studentRollno");
    this.books$ = this.studentservice.getStudentBooks(id);
  }

  ngOnInit(): void {}

}

【讨论】：