Angular2错误无法读取属性

时间:2017-06-14 14:22:16

标签: angular

我有一个创建对象的方法函数。这是我的功能

packetdata:any[];

ngOnInit() {
    this.service.getonepacket(this.nopacket).subscribe(
      data => {
          return this.packetdata = data;
      },
      error => console.log(this.errorMessage = <any>error)
    )
  }

如果我使用console log this.packet它就像这样的结果对象

Object {idpacket: 3, packetname: "Packet C", packetdesc: "SMS 20 sms/hari, Storage 20Gb", packetprize: "Rp. 300.000/bulan", packettime: 30}

我尝试将每个值都放在我的桌子上

<h3 class="page-header">Your Bill Information</h3>
<table class="table table-striped">
  <tr>
    <th *ngFor="let item of packetdata"> Packet Name </th>
    <td>{{item.packetname}}</td>
  </tr>
  <tr>
    <th *ngFor="let item of packetdata"> Description </th>
    <td> {{item.packetdesc}} </td>
  </tr>
  <tr>
    <th *ngFor="let item of packetdata"> Prize </th>
    <td> {{item.packetprize}} </td>
  </tr>
  <tr>
    <th *ngFor="let item of packetdata"> Minimal Contract time (day) </th>
    <td> {{item.packettime}} </td>
  </tr>
</table>

但它返回错误错误无法读取属性 怎么解决这个?

3 个答案:

答案 0 :(得分:1)

尝试将ngFor替换为<td>,如下所示:

<tr>
    <th > Packet Name </th>
    <td *ngFor="let item of packetdata">{{item.packetname}}</td>
</tr>

答案 1 :(得分:0)

<th *ngFor="let item of packetdata"> Packet Name </th>
<td>{{item.packetname}}</td>

无法正常工作

item仅在<th>内可用(已应用*ngFor指令的元素)      数据包名称{{item.packetname}}

你可能想要

<ng-container *ngFor="let item of packetdata">
  <th> Packet Name </th>
  <td>{{item.packetname}}</td>
</ng-container>

答案 2 :(得分:0)

将* ngIf =“packetdata”添加到标记表并删除de subscribe中的return。