Question

这是我的Card-list-Component.html

<mat-card *ngFor="let course of courses" class="course-card mat-elevation-z10">
    <mat-card-header>

        <mat-card-title>{{course.titles.description}}</mat-card-title>

    </mat-card-header>

    <img mat-card-image [src]="course.iconUrl">

    <mat-card-content>
        <p>{{course.titles.longDescription}}</p>
    </mat-card-content>

    <mat-card-actions class="course-actions">

        <button mat-button class="mat-raised-button mat-primary" [routerLink]="['/courses', course.url]">
            VIEW COURSE
        </button>

        <button mat-button class="mat-raised-button mat-accent"
                (click)="editCourse(course)">
            EDIT
        </button>

    </mat-card-actions>
</mat-card>

这是我的home-component.html

<h3>All Courses</h3>


<mat-tab-group>

    <mat-tab label="Beginners">

        <courses-card-list
                [courses]="[courses$ | async]">

        </courses-card-list>

    </mat-tab>

    <mat-tab label="Advanced">

        <courses-card-list
                [courses]="[]"

        ></courses-card-list>

    </mat-tab>

</mat-tab-group>

这是home-component.ts

import { Course } from './../model/course';
import {Component, OnInit} from '@angular/core';
import {Observable} from "rxjs";
import {map} from "rxjs/operators";
import { AngularFirestore } from '@angular/fire/firestore';
 @Component({
     selector: 'home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {

courses$ : Observable<Course[]>;


  constructor(private db:AngularFirestore) {

}

ngOnInit() {

  this.courses$ = this.db.collection('courses').snapshotChanges()
    .pipe(map(snaps => {
       return snaps.map(snap => {

          return <Course> {
            id: snap.payload.doc.id,
            ...(<Object>snap.payload.doc.data())
          }

      } );

    }));

}}

course.ts文件

export interface Course {
   id:string;
   titles: {
       description:string;
       longDescription: string;
   };
   iconUrl: string;
   uploadedImageUrl:string;
   courseListIcon: string;
   categories:string[];
   lessonsCount:number;
}

任何人都可以解释为什么我遇到此错误

ERROR TypeError: Cannot read property 'titles' of null
at CoursesCardListComponent_mat_card_0_Template (courses-card-list.component.html:7)
at executeTemplate (core.js:7329)
at refreshView (core.js:7198)
at refreshEmbeddedViews (core.js:8289)
at refreshView (core.js:7222)
at refreshComponent (core.js:8335)
at refreshChildComponents (core.js:6991)
at refreshView (core.js:7248)
at refreshComponent (core.js:8335)
at refreshChildComponents (core.js:6991)

我正在观看来自角度大学的视频教程，他的代码运行得很好而且我收到此错误，我不知道为什么请帮助我解决此错误

Answer 1

在模板中，将{{course.titles.something}}的所有实例更改为{{course？.titles？.something}}

可观察对象第一次返回数据时，它可能是无效/空数组。如果加上？消除了错误，但是字段仍然没有数据，您应该检查课程对象以确保它符合预期的界面。（还要仔细检查是否区分大小写）

Answer 2

我相信解决这个问题，抱歉回答晚了，但对于未来的人来说，使用“？”的解决方案其特别正确。要解决问题并显示列表，您需要将 *ngFor="let course of course" 更改为 *ngFor="let course of course[0]"。让我们摇滚吧！

出现错误，无法读取角度为null的属性“ titles”

2 个答案: