Question

Angular2 错误无法读取属性

2017-06-14

85

angular

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

packetdata:any[];

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

如果我使用控制台记录 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>

但它返回错误“无法读取属性”。
如何解决这个问题？

Answer 1

尝试将 ngFor 替换为 <td> ，如下所示：

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

Answer 2

<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>

Answer 3

将 *ngIf="packetdata" 添加到标签表并删除订阅内的返回。

alehn96

2017-06-14