Angular2 Error Cannot read property

Question

i have a method function that create object. here my function

packetdata:any[];

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

if i use console log this.packet it result object like this

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

i try to put that each value on my table like this

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

but it return error Error Cannot read property.
How to resolve this?.

like that sir @GünterZöchbauer Error: Error in ./BillComponent class BillComponent - inline template:5:8 caused by: Cannot read property 'packetname' of undefined — dedypuji, Jun 14 '17 at 14:25

score 1 · Answer 1 · answered Jun 14 '17 at 14:26

1

try to replace the ngFor to <td> like this :

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

answered Jun 14 '17 at 14:26

Mohamed Ali RACHID

3,245
11
22

score 0 · Accepted Answer · answered Jun 14 '17 at 14:27

0

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

can't work

item is only available within <th> (the element that has the *ngFor directive applied) Packet Name {{item.packetname}}

You might want

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

answered Jun 14 '17 at 14:27

Günter Zöchbauer

623,577
216
2,003
1,567

i change my code using yours sit. but it came up with error again – dedypuji Jun 14 '17 at 14:43
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. – dedypuji Jun 14 '17 at 14:43
See https://stackoverflow.com/questions/41396435/how-to-iterate-object-object-using-ngfor-in-angular-2/41396558#41396558 – Günter Zöchbauer Jun 14 '17 at 14:46

score 0 · Answer 3 · answered Jun 14 '17 at 14:29

0

Add *ngIf="packetdata" to tag table and remove return inside de subscribe.

answered Jun 14 '17 at 14:29

alehn96

1,363
1
13
23

Angular2 Error Cannot read property

3 Answers3