尝试显示对象属性的 Angular 4 错误

Question

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

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

课程.ts

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>

dataService.ts

import { HttpModule, Http, Response } from "@angular/http";
import { HttpClientModule } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { ActivatedRoute } from "@angular/router"
import { Observable } from "rxjs";
import 'rxjs/add/operator/map';

import { AllCourses } from "./entities/allCourses";
import { Course } from "./entities/course";

@Injectable()
export class DataService {

    constructor(
        private http: Http,
        private route: ActivatedRoute
    ) { }

    public course: Course;

    loadPages(courseID): Observable<Course> {
        return this.http.get("/api/pages/course/" + courseID)
            .map((result: Response) => this.course = result.json());

    }

    saveNewPage(coursePageForm) {
        console.log(coursePageForm);
        return this.http.post("/api/pages/page", coursePageForm)

    }


}

控制台日志

ng:///AppModule/PagesComponent.ngfactory.js:55 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.webpackJsonp.../../../common/esm5/common.js.NgForOf.ngOnChanges (vendor.bundle.js:8756)
    at checkAndUpdateDirectiveInline (vendor.bundle.js:60651)
    at checkAndUpdateNodeInline (vendor.bundle.js:62182)
    at checkAndUpdateNode (vendor.bundle.js:62125)
    at debugCheckAndUpdateNode (vendor.bundle.js:63018)
    at debugCheckDirectivesFn (vendor.bundle.js:62959)
    at Object.eval [as updateDirectives] (ng:///AppModule/PagesComponent.ngfactory.js:100)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:62944)
    at checkAndUpdateView (vendor.bundle.js:62091)
    at callViewAction (vendor.bundle.js:62442)
View_PagesComponent_0 @ ng:///AppModule/PagesComponent.ngfactory.js:55
ng:///AppModule/PagesComponent.ngfactory.js:55 ERROR CONTEXT DebugContext_
View_PagesComponent_0 @ ng:///AppModule/PagesComponent.ngfactory.js:55
ng:///AppModule/PagesComponent.ngfactory.js:78 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.webpackJsonp.../../../common/esm5/common.js.NgForOf.ngOnChanges (vendor.bundle.js:8756)
    at checkAndUpdateDirectiveInline (vendor.bundle.js:60651)
    at checkAndUpdateNodeInline (vendor.bundle.js:62182)
    at checkAndUpdateNode (vendor.bundle.js:62125)
    at debugCheckAndUpdateNode (vendor.bundle.js:63018)
    at debugCheckDirectivesFn (vendor.bundle.js:62959)
    at Object.eval [as updateDirectives] (ng:///AppModule/PagesComponent.ngfactory.js:103)
    at Object.debugUpdateDirectives [as updateDirectives] (vendor.bundle.js:62944)
    at checkAndUpdateView (vendor.bundle.js:62091)
    at callViewAction (vendor.bundle.js:62442)
View_PagesComponent_0 @ ng:///AppModule/PagesComponent.ngfactory.js:78
ng:///AppModule/PagesComponent.ngfactory.js:78 ERROR CONTEXT DebugContext_

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

Answer 1

将其更改为：

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);