Javascript 来自后端的数据在html页面中不可见

我有一份申请。我有一个从api调用中检索课程的服务

因此，服务方法如下所示：

  loadCourseById(courseId: number) {
       return this.http.get<Course>(`/api/courses/${courseId}`)
            .pipe(
              shareReplay()
            );
    }

@Component({
  selector: 'course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {

  course$: Observable<Course>;


  lessons$: Observable<Lesson[]>;

  constructor(private route: ActivatedRoute, private courseService: CoursesService) {


  }

  ngOnInit() {

    const courseId =  parseInt(this.route.snapshot.paramMap.get('courseId'));

    this.course$ = this.courseService.loadCourseById(courseId);

    console.log(courseId);

  }
}

  <ng-container *ngIf = "(course$ | async) as course">

    <div class="course">

      <h2>{{course?.description}}</h2>

      <img class="course-thumbnail" [src]="course?.iconUrl">

      <table class="lessons-table mat-elevation-z7">

        <thead>
        <th>#</th>
        <th>Description</th>
        <th>Duration</th>
        </thead>

      </table>
    </div>
  </ng-container>

loadCourseById（courseId:number）{
返回此.http.get（`/api/courses/${courseId}`）
.烟斗(
shareReplay（）
);
}

组件如下所示：

  loadCourseById(courseId: number) {
       return this.http.get<Course>(`/api/courses/${courseId}`)
            .pipe(
              shareReplay()
            );
    }

@Component({
  selector: 'course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {

  course$: Observable<Course>;


  lessons$: Observable<Lesson[]>;

  constructor(private route: ActivatedRoute, private courseService: CoursesService) {


  }

  ngOnInit() {

    const courseId =  parseInt(this.route.snapshot.paramMap.get('courseId'));

    this.course$ = this.courseService.loadCourseById(courseId);

    console.log(courseId);

  }
}

  <ng-container *ngIf = "(course$ | async) as course">

    <div class="course">

      <h2>{{course?.description}}</h2>

      <img class="course-thumbnail" [src]="course?.iconUrl">

      <table class="lessons-table mat-elevation-z7">

        <thead>
        <th>#</th>
        <th>Description</th>
        <th>Duration</th>
        </thead>

      </table>
    </div>
  </ng-container>

@组件({
选择器：“课程”，
templateUrl:“./course.component.html”，
样式URL:['./course.component.css']
})
导出类CourseComponent实现OnInit{
课程$：可观察；
课程：可观察的；
构造函数（专用路由：ActivatedRoute，专用courseService:courseService）{
}
恩戈尼尼特（）{
const courseId=parseInt（this.route.snapshot.paramMap.get（'courseId'）；
this.course$=this.courseService.loadCourseById（courseId）；
console.log（courseId）；
}
}

模板如下所示：

  loadCourseById(courseId: number) {
       return this.http.get<Course>(`/api/courses/${courseId}`)
            .pipe(
              shareReplay()
            );
    }

@Component({
  selector: 'course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.css']
})
export class CourseComponent implements OnInit {

  course$: Observable<Course>;


  lessons$: Observable<Lesson[]>;

  constructor(private route: ActivatedRoute, private courseService: CoursesService) {


  }

  ngOnInit() {

    const courseId =  parseInt(this.route.snapshot.paramMap.get('courseId'));

    this.course$ = this.courseService.loadCourseById(courseId);

    console.log(courseId);

  }
}

  <ng-container *ngIf = "(course$ | async) as course">

    <div class="course">

      <h2>{{course?.description}}</h2>

      <img class="course-thumbnail" [src]="course?.iconUrl">

      <table class="lessons-table mat-elevation-z7">

        <thead>
        <th>#</th>
        <th>Description</th>
        <th>Duration</th>
        </thead>

      </table>
    </div>
  </ng-container>

{{课程？.description}}
#
描述
期间

所以我检查了api调用。我在console.log中看到我得到了正确的数据

但是在html页面中，它是空的，因此没有可见的内容

那么我要改变什么呢

---

谢谢

您错过了代码中的一个小改动

从您的服务中移除此管道

.pipe(shareReplay());

对于您的模板，有两种可能的更改要继续：

1-在您的ngIf语句中删除（）=>*ngIf=“course$| async as course”

{{course.description}
....

2-您的ngIf语句将如下所示=>*ngIf=“course$| async”

{（课程$|异步）？.description}
....

我希望这是有益的