Question

是否可以 - 从管道中 - 查询Firebase数据库并返回值？

我有以下HTML

 <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

    <section id="top" class="clearfix">
    <div class="wrapper">
        <div class="ml-title" style="margin-bottom: 2em">
            <span class="pull-left top">Watch</span>
            <ul role="tablist" class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" role="tab" href="#video_1" aria-expanded="false">Video 1</a></li>
                <li>
                    <li><a data-toggle="tab" role="tab" href="#video_2" aria-expanded="false">Video 2</a></li>
                    <li><a data-toggle="tab" role="tab" href="#video_3" aria-expanded="false">Video 3</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div id="video_1" class="rows tab-pane in fade active">
                <div class="post">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/kJQP7kiw5Fk" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div id="video_2" class="rows tab-pane in fade">
                <div class="post">
                    <<iframe width="560" height="315" src="https://www.youtube.com/embed/JGwWNGJdvx8" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
            <div id="video_3" class="rows tab-pane in fade">
                <div class="post">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/papuvlVeZg8" frameborder="0" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</section>

以下管道：

<div *ngFor="let item of items">
    <h2>
        {{item.firstName}} {{item.middleName}} {{item.lastName}}
    </h2>

    <div *ngFor="let lifeItem of (item.$key | event: 'life')">
        Born: {{lifeItem.start}}
    </div>
</div>

当我运行这个时，我在控制台中得到了这个......

...但在页面的相应部分中没有任何内容呈现。

Answer 1

我认为，最好使用Angular AsyncPipe

export class EventPipe implements PipeTransform {
    constructor(protected db: AngularFireDatabase){}

    public transform(personId: any, eventType: any) { 
        if (!personId || !eventType) return Observable.of([]);
        return this.db.list('/event', {
            query: {
                limitToLast: 200
            }
        });
    }
}

<div *ngFor="let lifeItem of (item.$key | event: 'life' | async)">
    Born: {{lifeItem.start}}
</div>

Answer 2

我的猜测是，由于数据库调用是异步操作，因此您必须在数据可用之前考虑延迟。尝试使用异步管道作为辅助管道并在获取.items

之前进行空检查

这样的事情：*ngFor="let lifeItem of (item.$key | event: 'life' | async)?.items"

注意：我自己没有测试过此代码。只是提出建议。

Angular4 / AngularFire2：从管道内查询firebase？

2 个答案: