Khurram Shakoor Khurram Shakoor -3 years ago 248
TypeScript Question

ERROR Error: Uncaught (in promise): TypeError: Unable to get property 'Results' of undefined or null reference

I am getting following error. I am posting all the content of my code. please see all the code below. Thanks

ERROR Error: Uncaught (in promise): TypeError: Unable to get property 'Results' of undefined or null reference
TypeError: Unable to get property 'Results' of undefined or null reference
at Anonymous function (Function code:492:5)
}

HTML

<div class="row">
<table class="table table-striped table-hover col-md-12 col-sm-12">
<thead>
<tr>
<th>Title</th>
<th>Submitting Department</th>
<th>Start Date</th>
<th>End Date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let event of filterdResult.Results">
<td>{{ event.Title }}</td>
<td>{{ event.SubmittingDepartment }}</td>
<td>{{ event.StartDateTime }}</td>
<td>{{ event.EndDateTime }}</td>
<td>
<a [routerLink]="['/event', event.HealthFairEventId]">
<i class="glyphicon glyphicon-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>


Component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import { SearchParameters, PagedResults } from '../event.model';
import { EventService } from '../event.service';

@Component({
selector: 'app-events-list',
templateUrl: './events-list.component.html',
styleUrls: ['./events-list.component.css'],
providers: [EventService]
})
export class EventsListComponent implements OnInit {
filterdResult: PagedResults;
searchparameters: SearchParameters = new SearchParameters();

constructor(private eventService: EventService,
private route: ActivatedRoute) {
}

ngOnInit() {
this.searchparameters.SortField = "Title";
this.searchparameters.SortDirection = "ASC";
this.searchparameters.PageSize = 10;
this.searchparameters.CurrentPageIndex = 1;

this.eventService.getEvents(this.searchparameters)
.subscribe(
//filterdResult => console.log(filterdResult),
filterdResult => this.filterdResult = filterdResult,
response => {
console.log('error occured');
});
}

}


Service

import { Injectable } from '@angular/core';
import { Http} from '@angular/http';
import 'rxjs/add/operator/map';

import { Event, SearchParameters } from './event.model';

@Injectable()
export class EventService {
private _url = "http://localhost:36888/api/XX";

constructor(private _http: Http) {
}

getEvents(SearchParameters) {
return this._http.post(this._url + "/XX", SearchParameters).map(res => res.json());
}

}


Model Class

export class Event {
HealthFairEventId: number;
Title: string
SubmittingDepartment: string;
Location: string;
Description: string;
StartDateTime: Date;
EndDateTime: Date;
RecommendedParticipantsInvitationValues: participants[];
RecommendedParticipantsValues: boolean[];
/*constructor(healthFairEventId: number, title: string, submittingDepartment: string, location: string, startDateTime: string, endDateTime: string, description: string) {
this.healthFairEventId = healthFairEventId;
this.title = title;
this.submittingDepartment = submittingDepartment;
this.location = location;
this.startDateTime = startDateTime;
this.endDateTime = endDateTime;
this.description = description;
}*/
}

export class participants {
RecommendedParticipantId: number;
DepartmentName: string;
DepartmentLocation: string;
ContactPersonName: string;
ContactPersonEmail: string;
ContactPersonPhone: string;
RecommendedParticipantsIsChecked: boolean;
InvitationStatus?: boolean;
InvitationStatusCSSClass: string;
InvitationStatusText: string;
}

export class SearchParameters {
Title: string;
EventDateFrom: string;
EventDateTo: string;
Location: string;
SubmittingDepartment: string;
SortField: string;
SortDirection: string;
PageSize: number;
CurrentPageIndex: number;
}

export class PagedResults {
PageNumber: number;
PageSize: number;
TotalNumberOfPages: number;
TotalNumberOfRecords: number;
Results: Event[];
}

Answer Source

When the template first displays, the filterdResult used here let event of filterdResult.Results is not yet set. Hence the reason it tells you it can't get the Results from undefined.

Add an *ngIf around the html (maybe on the table element) to prevent it from displaying until filterdResult is set:

<table *ngIf = "filterdResult" ...>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download