CODEWITHSUNDEEP
javascriptangular
Chanter08
Chanter08

Reputation: 151

Can't Access data of array Angular

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>

Data in Console

Upvotes: 2

Views: 675

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222722

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>

Upvotes: 2

Related Questions