How can I make *ngFor continue even when it hits an undefined value instead of stopping? When I remove {{order.shipping.name}}, the other two interpolations work fine.
This is 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();
}
}
And here's 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 found a solution here and made this change:
orders$: FirebaseListObservable<any>; in the component
{{order?.shipping.name}} in the template
However, it didn't solve the issue for me.