Question

NativeScript（v3.1）+ Angular（v4.1）应用。我有一个<ListView>用于显示使用Observable和异步管道加载异步的对象集合。如果我从firebase获得真实数据，它不会显示在屏幕上。如果我使用模拟数据并加载到Observable，它会正确显示。如果我尝试使用3秒延迟的模拟数据，它也无法显示。所以它是使用Nativescript进行异步和渲染的东西。

facilities.component.ts

export class FacilitiesComponent implements OnInit {
    facilities$: Observable<Facility[]>;
    constructor(private facilityService: FacilityService) { }

    ngOnInit(): void {
        // Real data from firebase
        this.facilities$ = this.facilityService.getFacilities$()
            .map(fac => fac.splice(0, 2))
            .map(fac => fac.map(f => ({
                name: f.name,
                key: f.key
            })))
            .do(fac => {
                console.dir(fac);
                console.log('got it firebase!');
            });

        // Mocked data
        this.facilities$ = of([
            { name: 'College of the Ozarks', key: '-KpCKMjLqWv6UEKrUwyT' },
            { name: 'Town and Country Butcher Shop', key: '-KpCKMj6KrXPPej_yX7a' }
        ])
            .do(fac => {
                console.dir(fac);
                console.log('got it mocked!');
            });

        // mocked with delay
        const subject = new Subject<Facility[]>();
        setTimeout(() => {
            subject.next([
                { name: 'College of the Ozarks', key: '-KpCKMjLqWv6UEKrUwyT' },
                { name: 'Town and Country Butcher Shop', key: '-KpCKMj6KrXPPej_yX7a' }
            ]);
            subject.complete();
        }, 3000);
        this.facilities$ = subject.asObservable();
        }
    }

facilities.component.html

<StackLayout class="page">
    <ListView [items]="facilities$ | async" class="list-group">
        <ng-template let-item="item" let-i="index">
            <Label [text]="item.name" [nsRouterLink]="['/facility', item.key]" class="list-group-item"></Label>
        </ng-template>
    </ListView>
</StackLayout>

firebase的结果

JS: === dump(): dumping members ===
JS: [
JS:     {
JS:         "name": "College of the Ozarks",
JS:         "key": "-KpCKMjLqWv6UEKrUwyT"
JS:     },
JS:     {
JS:         "name": "Town and Country Butcher Shop",
JS:         "key": "-KpCKMj6KrXPPej_yX7a"
JS:     }
JS: ]
JS: === dump(): dumping function and properties names ===
JS: === dump(): finished ===
JS: got it firebase!

使用模拟时的结果

JS: === dump(): dumping members ===
JS: [
JS:     {
JS:         "name": "College of the Ozarks",
JS:         "key": "-KpCKMjLqWv6UEKrUwyT"
JS:     },
JS:     {
JS:         "name": "Town and Country Butcher Shop",
JS:         "key": "-KpCKMj6KrXPPej_yX7a"
JS:     }
JS: ]
JS: === dump(): dumping function and properties names ===
JS: === dump(): finished ===
JS: got it mocked!

服务：

export class FacilityService {
    getFacilities$(): Observable<Facility[]> {
        const subject = new Subject<Facility[]>();
        firebase.query(
            (result) => {
                const facilities = Object.keys(result.value).map(key => ({
                    ...result.value[key],
                    key
                }));
                subject.next(facilities);
                subject.complete();
            },
            "/facilities",
            {
                singleEvent: true,
                orderBy: {
                    type: firebase.QueryOrderByType.CHILD,
                    value: 'latitude' // mandatory when type is 'child'
                }
            });
        return subject.asObservable();
    }

的package.json

"dependencies": {
    "@angular/animations": "4.1.0",
    "@angular/common": "4.1.0",
    "@angular/compiler": "4.1.0",
    "@angular/core": "4.1.0",
    "@angular/forms": "4.1.0",
    "@angular/http": "4.1.0",
    "@angular/platform-browser": "4.1.0",
    "@angular/router": "4.1.0",
    "nativescript-angular": "3.1.0",
    "nativescript-plugin-firebase": "4.0.3",
    "nativescript-theme-core": "1.0.2",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.3.0",
    "tns-core-modules": "3.1.0",
    "tslib": "^1.7.1",
    "zone.js": "0.8.2"
},

Nativescript observable / async将不会在ListView中显示

0 个答案: