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

Question

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 这是 HTML 代码我使用 Pipe 作为异步但仍然无法在 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); 
  }
})

如果可能请帮忙

Answer 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 {}

}

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

Why I am unable to display Observable data in my HTML page?

angular

rxjs-observables