错误：未捕获（承诺）：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：无法获取未定义或空引用的属性'结果'

回答

相关问题