CODEWITHSUNDEEP
angulartypeerror
Manpreet Singh Panesar
Manpreet Singh Panesar

Reputation: 21

getting error Cannot read property 'titles' of null in angular

This is my 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>

here is my 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>

this is 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 file

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

could anyone please explain why I am getting this error

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)

i am watching a video tutorial from angular university his code is running prefectly fine and i am getting this error i dont know why please help me to resolve this error

Upvotes: 2

Views: 370

Answers (2)

Vinicius Lima
Vinicius Lima

Reputation: 51

Man i believe solve that, sorry by late answer, but for future people, the solution to use "?" its parcial correct. To solve the problem and show the list you need to change *ngFor="let course of courses" for *ngFor="let course of courses[0]". Let's Rock!

Upvotes: 1

The James
The James

Reputation: 465

In the template, change all instances of {{course.titles.something}} to {{course?.titles?.something}}

The first time the observable returns data, it might be an invalid/empty array. If adding the ? removes the error, but the fields still don't have data, you should inspect the course object to make sure that it fits the interface as expected. (double-check case-sensitivity too)

Upvotes: 2

Related Questions