CODEWITHSUNDEEP
angulartypescriptfirebasengfor
imnickvaughn
imnickvaughn

Reputation: 3014

ngFor loop is hitting an undefined and stopping

*ngFor is hitting an undefined value and stopping, how do I tell it to keep going? ... when I take out {{order.shipping.name}} the other two interpolations work.

the component:

import { Observable } from 'rxjs/Observable';
import { Component } from '@angular/core';
import { OrderService } from '../../order.service';
import { FirebaseListObservable } from 'angularfire2/database-deprecated';

@Component({
    selector: 'app-admin-orders',
    templateUrl: './admin-orders.component.html',
    styleUrls: ['./admin-orders.component.css']
})
export class AdminOrdersComponent {
    orders$;

    constructor(private orderService: OrderService) {
        this.orders$ = orderService.getOrders();
    }

}

the template:

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>date</th>

            <th class="text-center">id</th>
            <th class="text-right">id</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <div *ngFor="let order of this.orders$ | async: date">
                    {{order.shipping.name}}

                </div>
            </td>
            <td class="text-center">
                <div *ngFor="let order of this.orders$ | async">

                    {{order.datePlaced | date:"short"}}
                    <!-- https://angular.io/api/common/DatePipe -->
                </div>
            </td>
            <td class="text-right">
                <div *ngFor="let order of this.orders$ | async">
                    <a> {{order.userId}} </a>

                </div>
            </td>
        </tr>
    </tbody>
</table>

I looked here and changed it to... 

orders$: FirebaseListObservable<any>; in the component

{{order?.shipping.name}} in the template

...with no luck

Upvotes: 0

Views: 322

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

You need another safe navigation operator after shipping as well,

 {{order?.shipping?.name}}

Upvotes: 2

Related Questions