ngFor循环正在进行未定义并停止

时间:2018-02-17 14:21:52

标签: angular typescript firebase ngfor

* ngFor正在达到未定义的值并停止,我该怎么告诉它继续? ......当我拿出来的时候 {{order.shipping.name}} 其他两个插值工作。

组件:

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();
    }

}

模板:

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

我查看here并将其更改为...

orders$: FirebaseListObservable<any>; in the component
模板中的

{{order?.shipping.name}}

......没有运气

1 个答案:

答案 0 :(得分:2)

发货后还需要另一个安全的导航操作员,

 {{order?.shipping?.name}}