onResRdy中的异常：TypeError：无法读取属性＆＃39; htmlRes＆＃39;未定义的

Question

我正在创建一个anuglar2应用程序。我无法从我的服务打印html页面上的数据。我在onResRdy中收到错误异常：TypeError：无法读取属性＆＃39; htmlRes＆＃39;在我的控制台上未定义。有人可以告诉我问题是什么。

风险list.components.ts

import { Component, OnInit } from '@angular/core';
import { Risk } from './risk';
import { RiskService } from './risk.service';

@Component({
    selector: 'rm-risks',
    template: `<h1>{{title}}</h1><h2>{{risks}} details!</h2>`,

    providers: [RiskService]
    })  

export class RiskListComponent implements OnInit  {
    title  = 'Risk List';
    risks: Risk[];

    constructor(private _riskService: RiskService) {
      console.log(this.risks);
    }

    getRisks(): void {
        this._riskService.getRisks().then(risks => this.risks = risks);
    }

    ngOnInit(): void {                                                                                                                  
        this.getRisks();
    }
};

risk.service.ts

import { Injectable } from '@angular/core';
import { Risk } from './risk';
import { Risks } from './mock-risks';

@Injectable()
export class RiskService {

    getRisks(): Promise<Risk[]> {
        return Promise.resolve(Risks);
    }

}

risk.ts

export class Risk {
    riskId: number;
    reference: string;
    insuredName: string;
    inceptionDate: string;
    riskType: string;
    status: string;
    grossPremium: number;
    allocatedTo: string;
    allocatedCompany: string;

}

模拟risks.ts

import {Risk} from './risk'

export const Risks: Risk[] = [

    {
        riskId: 1,
        reference: "HISC9308336",
        insuredName: "SA 84161",
        inceptionDate: 'March 19, 2016',
        riskType: 'Quote',
        status: 'Indication',
        grossPremium: 100,
        allocatedTo: 'Broker User',
        allocatedCompany: 'Broker'

    }
];

风险list.component.html

<h3 class="first">{{title}}</h3>

<div>{{risks | json}}</div>
<p-dataTable [value]="risks" [paginator]="true" rows="5" totalRecords="100" pageLinkSize="3" [rowsPerPageOptions]="[5,10,20]"  [sortMode]="multiple" sortField="inceptionDate" [sortOrder]="1" >
    <header>List of Risks</header>



        <!--<footer>Choose from the list.</footer>-->
        <p-column field="reference" header="Reference (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="insuredName" header="Insured Name (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="inceptionDate" header="Inception Date (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="riskType" header="Risk Type (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="status" header="Status (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="grossPremium" header="Gross Premium (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="allocatedTo" header="Allocated To (contains)" [filter]="true" sortable="true"></p-column>
        <p-column field="allocatedCompany" header="Allocated Company (contains)" [filter]="true" sortable="true"></p-column>

</p-dataTable>