錯誤：未捕獲（承諾）：TypeError：無法獲取未定義或空引用的屬性'結果'

我收到以下錯誤。我發佈了我的代碼的所有內容。請看下面的所有代碼。由於錯誤：未捕獲（承諾）：TypeError：無法獲取未定義或空引用的屬性'結果'

錯誤錯誤：未捕獲的（在承諾）：類型錯誤：無法獲取的未定義或爲空引用屬性「結果」類型錯誤：無法獲取的匿名函數的未定義或空引用財產「結果」（功能代碼：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>

元器件

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

}

服務

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

    }

模型類

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[]; 
}

來源

2017-06-12 Khurram Shakoor

你得到的錯誤，因爲filterdResult是undefined當頁面最初呈現。直到web服務調用解析爲止，filterdResult將最終得到一個值，並且頁面按照你想要的方式呈現。

兩種解決方案

選項1
在你的表格標記添加*ngIf使該表將不會被渲染，直到filterdResult具有這樣的值：

<table *ngIf="filterdResult" class="table table-striped table-hover col-md-12 col-sm-12">

選項2
將filterdResult初始化爲初始值，如t他的

export class EventsListComponent implements OnInit { 
    filterdResult: PagedResults = new PagedResults(); 
    // or like below if PagedResults is an interface 
    // filterdResult: PagedResults = {Results: []};

來源

2017-06-12 20:37:27 CodeWarrior

當模板第一顯示器中，使用filterdResult這裏let event of filterdResult.Results尚未設置。因此，它告訴你它不能從undefined獲得結果。

周圍添加HTML的* ngIf（也許是表元素），以防止它顯示，直到filterdResult設置：

<table *ngIf = "filterdResult" ...>

來源

2017-06-12 20:36:11 DeborahK

錯誤：未捕獲（承諾）：TypeError：無法獲取未定義或空引用的屬性'結果'

回答

相關問題