Can't Access data of array Angular

Question

I have an array which is obtained form a db. I have managed to display the data in the console (I can see the data in chrome console, as shown in Picture) but for some reason no data is displayed in the actual HTML page. Hello and Hello 2 are both printed but no data is printed for {{p.price}} or {{p.propertyId}}

product.component.html

<table class="table" *ngIf='properties && properties.length'> 
    <tbody>
        <tr>Hello</tr>
         <tr *ngFor="let p of properties">
            <td>Hello 2</td>
            <td>{{p.price}}</td>
            <td>{{p.propertyId}}</td>
        </tr>
    </tbody>
</table>

Sajeetharan · Accepted Answer · 2017-12-31 10:22:47Z

2

You have array of arrays, so you need nested ngFor, You can use the helper element <ng-container> like

<table class="table" *ngIf='properties && properties.length'> 
    <tbody>
        <tr>Hello</tr>
        <tr *ngFor="let p of properties">
         <ng-container *ngFor="let prop of p">
            <td>Hello 2</td>
            <td>{{prop.price}}</td>
            <td>{{prop.propertyId}}</td>
        </ng-container>
        </tr>
         </span>
    </tbody>
</table>

edited Dec 31, 2017 at 10:22

answered Dec 31, 2017 at 9:58

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

connexo Over a year ago

Unfortunately, this HTML is invalid. The only allowed direct child elements of a tr are td or th.

Sajeetharan Over a year ago

@connexo should be fine now, you can use ng-container

connexo Over a year ago

I haven't downvoted. And no, span is illegal there and creates invalid HTML.

Sajeetharan Over a year ago

anyways should be fine now

Chanter08 Over a year ago

@Sajeetharan Thanks for the Help :) !

Collectives™ on Stack Overflow

Can't Access data of array Angular

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related