Question

向API发送请求后，我在页面上显示数据时遇到问题。我以前从未遇到过这个问题，也不知道是什么原因造成的。这只是一些最简单的实现，但没有用。

我的服务：

 getCourseInfo(data): Observable<any> {
    const id = parseInt(data);
    const url = `${this.baseUrl}/TblUnimeCourses/getCourseInfo/` + id;
    return this.http.get(url);
 }

我的页面解析器：

  constructor(private courseService: CourseService) {}

  resolve(route: ActivatedRouteSnapshot) {
      return this.courseService.getCourseInfo(route.paramMap.get("id"));
  }

我的组件：

  export class IntroComponent implements OnInit {
    courseInfo: CourseInfo;
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
       this.courseInfo = this.route.snapshot.data.data;
       console.log(this.courseInfo);
    }
  }

  export interface CourseInfo {
     courseTitle: any;
     coursePrice: number;
  }

我的控制台日志：

  courseCode: "IT101"
  coursePrice: 300
  courseTitle: "Information Technology"
  description: "Monash University Foundation Course"
  introduction: "Introductory course"

我的模板：（（很抱歉，当我尝试其他方法时，我在此处粘贴了错误的代码，然后我再次检查了自己的代码，它正在使用CourseInfo这个对象进行显示。因此问题仍未得到解决。还有问号我在此对象不能解决此问题后添加的。）

  <div class="intro-title">
     <h2>{{ courseInfo?.courseTitle }}</h2>
  </div>

但是，即使我取回了数据并拥有控制台日志，也无法显示courseTitle。我可以在开发工具中看到它们。

Answer 1

在模板上使用CourseDetail时，您正在填充this.courseInfo，该模板是组件的@input。因此，您可以使用this.courseInfo或在courseDetail中设置数据，然后将其作为@input提供给组件。

Answer 2

我认为courseDetail输入未定义。您应该尝试改用courseInfo?.courseTitle。

Answer 3

我认为应该是：

<div class="intro-title">
   <h2> {{ courseInfo?.courseTitle }} </h2>
</div>

数据未显示在页面上

3 个答案: