从 http.get() 加载的 JSON 数据在我的 Angular 2 模板中未定义

Question

我正在尝试读取本地 json 文件并将其解析为我创建的具有相同属性的类。当我尝试从类中读取时，它给我错误提示类为 null 或未定义。

我有一个文件 hall.ts 如下所示:

import {Item} from '../item/item';
export class Hall {
    constructor(public id:number,
                public naam:string,
                public oppervlakte:number,
                public aantalItems:number,
                public itemsMetNodigeActie:number,
                public items:Item[]) {
    }
}

它使用item.ts:

export class Item {
    constructor(public categorie:string,
                public naam:string,
                public productnummer:string,
                public omschrijving:string,
                public laatsteUitgevoerdeActie:Actie,
                public eerstVolgendeActie:Actie) {
    }
}
export class Actie{
    constructor(datum: string,
                type: string,
                omschrijving: string){}
}

我尝试读取的 json 文件 hall1.json 如下所示:

{
  "id": 1,
  "naam": "hall1",
  "oppervlakte": 100,
  "aantalItems": 3,
  "itemsMetNodigeActie": 3,
  "items": [
    {
      "id": 1,
      "categorie": "machine",
      "productnummer": "ADE124e",
      "omschrijving": "print papieren af",
      "laatsteUitgevoerdeActie": {
        "datum": "2015-01-05T00:00:00.000Z",
        "type": "vervanging",
        "omschrijving": "papier vervangen"
      },
      "eerstVolgendeActie": {
        "datum": "2016-01-06T00:00:00.000Z",
        "type": "vervanging",
        "omschrijving": "inkt vervangen"
      }
    }
  ]
}

我正在使用 hall.service.ts 尝试读取本地存储的 json 文件，并将其返回到 Hall 对象中。这是这样做的方法:

public getHall(): Observable<Hall> {
    return this.http.get('app/hall/hall1.json')
        .map((res:Response) => res.json());
}

我在我的 hallDetail.component.ts 中使用了这个方法

export class HallDetailComponent implements OnInit{
    public hall: Hall;
    constructor(
        private service: HallService
    ){}
    ngOnInit(){
        this.service.getHall().subscribe((hall:Hall) => {
            this.hall = hall;
        })
    }
}

到目前为止它没有给我任何错误，但是当我尝试从 hall 对象中读取时，它说它是未定义的

@Component({
    template: `
  <div>
    {{hall.naam}}
  </div>
  `
})

错误:

EXCEPTION: TypeError: Cannot read property 'naam' of undefined in [
    {{hall.naam}}
   in HallDetailComponent@1:7]

Answer 1

您必须记住 http.get() 调用是异步的。您的模板试图在 hall 被您的异步 http 调用解析之前将其作为对象处理。

这就是 hall 未定义的原因，因此您无法访问它的任何属性(它尚不存在)。

正如埃里克在评论中提到的，为您的模板尝试这样的事情:

@Component({
    template: `
  <div>
    {{hall?.naam}}  <!-- note the added ? -->
  </div>
  `
})

这将使对 hall 上的 naam 的引用安全。

更新:

为了完整起见，我会指出您实际上也可以为此使用 *ngIf，尽管 null 安全检查使模板看起来更简洁。

@Component({
    template: `
  <div *ngIf="hall"> <!-- note the added *ngIf -->
    {{hall.naam}}
  </div>
  `
})