Question

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

我使用API通过id获取单个对象。我可以在模板中使用* ngFor显示对象，一切都完美显示。但是我得到一个控制台错误＆＃34;错误错误：找不到不同的支持对象＆＃39; [object Object]＆＃39;类型＆＃39;对象＆＃39;。 NgFor仅支持绑定到Iterables，例如Arrays。＆＃34;。我不希望它成为一个数组，但当我尝试＆＃34; {{course.courseTitle || ＆＃39;正在加载数据......＆＃39; }}＆＃34;它自己不会显示任何东西。

course.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)
    }
}

＆＃34;的console.log（this.course.courseTitle）＆＃34;在上面的文件中显示＆＃34; undefined＆＃34;。

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)

    }


}

的console.log

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_

我已经尝试过谷歌这个问题，但由于我是初学者而且可能没有使用正确的术语，因此很难。我在这里做错了什么？

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

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

1 个答案: