Angular 尝试显示对象属性时出现角度4错误

我正在自学Angular 4，并且很难在模板中显示对象属性

我使用API通过id获取单个对象。我可以在模板中使用*ngFor显示对象，所有内容都可以完美显示。但是，我收到一个控制台错误“error error:找不到类型为“object”的不同支持对象“[object object]”。NgFor仅支持绑定到数组之类的Iterables。我不希望它是一个数组，但当我自己尝试“{course.courseTitle | | |'加载数据…'}}”时，它不会显示任何内容

课程

export interface Course {
  id?: number;
  courseCode?: string;
  courseTitle?: string;
  masterOU?: number;
  template?: number;
  textToSpeechScripts?: number;
  pages?: number;
  quizzes?: number;
  discussionForums?: number;
  assignments?: number;
}

pages.component.ts

import { Component, OnInit } from "@angular/core";
import { DataService } from "../shared/dataService";
import { ActivatedRoute, Params } from "@angular/router"
import 'rxjs/add/operator/map';

import { Course } from "../shared/entities/course";

@Component({
    selector: "pages",
    templateUrl: "pages.component.html",
    styleUrls:[]
})

export class PagesComponent implements OnInit {
    title = 'Course Pages';

    constructor(
        private data: DataService,
        private route: ActivatedRoute
    ) {  }

    public course: Course;

    ngOnInit(): void {

        this.course = {};
        this.course.id = this.route.snapshot.params['courseID']

        this.route.params
            .subscribe(
            (params: Params) => {
                this.course.id
            });

        this.data.loadPages(this.course.id)
            .subscribe(() => this.course = this.data.course);

        console.log(this.course.courseTitle)
    }
}

上面文件中的“console.log（this.course.courseTitle）”显示“undefined”

pages.component.html

<div class="row">
    <div class="col-md-9">
        <h3>{{ title }}</h3>
        <div *ngFor="let c of course">
        <p>{{ c.courseTitle || 'Loading Data...' }} - {{ c.courseCode || 'Loading Data...' }}</p>
    </div>

        <p>{{ course.id || 'Loading Data...' }}</p>

        <router-outlet></router-outlet>

        <table ng-hide="course.pages == null" class="table table-bordered table-sm table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Page</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody *ngFor="let c of course">
                <tr *ngFor="let p of c.pages">
                    <td>{{ p.id }}</td>
                    <td>{{ p.pageName }}</td>
                    <td>
                        <a>View</a> |
                        <a>Edit</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <p><a [routerLink]="'/courses'">Back to List</a></p>
    </div>
</div>

我曾尝试用谷歌搜索这个问题，但这很困难，因为我是一个初学者，可能没有使用正确的术语。我在这里做错了什么？

将此更改为：

this.route.params
        .subscribe(
        (params: Params) => {
            this.course.id = params['courseID']
        });

这是在做什么？为什么要重写整个this.course对象

    this.data.loadPages(this.course.id)
        .subscribe(() => this.course = this.data.course);

---

发布您在console.log（this.course）中拥有的内容，然后尝试console.log（this.course[0].courseTitle）；结果被包装在一个对象中/array@Sajeetharan我已经在上面的帖子中添加了console.log。@Steve API每次只返回一个对象。我不想为此遍历数组。@RJay我需要您的ArrayLadPages的console.log正在从我的dataService.ts文件调用一个方法。我已将该文件添加到上面的帖子中。

this.route.params
        .subscribe(
        (params: Params) => {
            this.course.id = params['courseID']
        });

    this.data.loadPages(this.course.id)
        .subscribe(() => this.course = this.data.course);