1

我正在将Nativescript 与 Angular 一起使用，并且编写的代码在首次构建应用程序时成功地onQueryEvent从nativescript-firebase-plugin调用数据集。但是，在遵循到达包含完全相同的第二个组件的路线后onQueryEvent，数据成功检索了完整列表，但跳过了onQueryEvent.

老实说，我不知道在任何情况下查询的最佳实践，更不用说这个了，所以我希望这只是操纵我如何调用onQueryEvent.

我相信问题出getMyTransactionList()在文件函数内部的 firebase.query 中firebase.service.ts。

该overview.component.html页面有一个transaction | async RadListView在运行时成功过滤的tns run android。然后点击任何指向deal-summary.component.html函数被重新迭代的页面的链接拒绝通过storage设置的静态变量查询firebase.service

这是我的代码：

firebase.service.ts

export class FirebaseService {

private _allItems: Array<any> = [];
items: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
public storage: any = '-KomUSGcX-j6qQmY4Wrh'; // set statically to test different routes

constructor(
            private ngZone: NgZone,
            ){}

// fetch data

  getMyDealList(): Observable<any> {
    return new Observable((observer: any) => {
      let path = `deals/${BackendService.token}`;

        let onValueEvent = (snapshot: any) => {
          this.ngZone.run(() => {
            let results = this.handleSnapshot(snapshot.value);
             observer.next(results);
          });
        };
        firebase.addValueEventListener(onValueEvent, `/${path}`);
    }).share();              
  }


    getMyTransactionList(): Observable<any> {
    return new Observable((observer: any) => {

      let path = `transactions/${BackendService.token}`;

      // this is a merge of jen loopers giftler code combined with nativescrip-firebase-plugins standard onQueryEvent.  It works on the first load but routing to a second instance of the same function retrieves all the data without queryEvent
    let onQueryEvent = (snapshot: any) => {
          this.ngZone.run(() => {
            let results = this.handleSnapshot(snapshot.value);
             observer.next(results);
          });
        };

      firebase.query(
        onQueryEvent,
        `/transactions/${BackendService.token}`,
        {

            singleEvent: true,

            orderBy: {
                type: firebase.QueryOrderByType.CHILD,
                value: 'dealId' // mandatory when type is 'child'
            },

            range: 
              {
                  type: firebase.QueryRangeType.EQUAL_TO,
                  value: `${this.storage}` // this calls a static variable for testing consistency
              }
            ,

        }
    );

        firebase.addValueEventListener(onQueryEvent, `/${path}`);
        console.log("transaction Listener added");
    }).share();              
  }



  handleSnapshot(data: any) {
    //empty array, then refill and filter
    this._allItems = [];
    if (data) {
      for (let id in data) {   
        let result = (<any>Object).assign({id: id}, data[id]);
          this._allItems.push(result);

      }
      this.publishUpdates();
    }
    return this._allItems;
  }


 publishUpdates() {
    // here, we sort must emit a *new* value (immutability!)
    this._allItems.sort(function(a, b){
        if(a.date < b.date) return -1;
        if(a.date > b.date) return 1;
      return 0;
    })
    this.items.next([...this._allItems]);
  }
}

app.component.ts

<page-router-outlet></page-router-outlet>

概览.component.ts

 export class OverviewComponent implements OnInit {

    public deals: Observable<any>;
    public transactions: Observable<any>;

    constructor(private router: Router, 
                private firebaseS: FirebaseService,
                ){  }

  ngOnInit() {
    this.deals = <any>this.firebaseS.getMyDealList();
    this.transactions = <any>this.firebaseS.getMyTransactionList();
  }


  viewDealSumm(id){
         this.router.navigate(['dashboard/deal-summary', id]);
    }
}

概述.component.html

          <RadListView [items]="deals | async ">
                <ng-template tkListItemTemplate let-item="item">
                    <StackLayout (tap)="viewDealSumm(item.id)">
                         <Label [text]="item.dealName"></Label>
                       </StackLayout>
                    </ng-template>
                </ListViewGridLayout>
            </RadListView>





            <RadListView [items]="transactions | async " >
                  <ng-template tkListItemTemplate let-item="item">
                       <GridLayout>
                            <Label [text]="item.transName"></Label>
                       </GridLayout>
                   </ng-template>
            </RadListView>

交易-summary.component.ts

export class DealSummaryComponent implements OnInit {

    public transactions: Observable<any>;

    constructor(
                private firebaseS: FirebaseService,
                         ){ }

  ngOnInit() {
    this.transactions = <any>this.firebaseS.getMyTransactionList();
  }

交易-summary.component.html

     <RadListView [items]="transactions | async " >
        <ng-template tkListItemTemplate let-item="item">
            <GridLayout >
                <Label col="1" [text]="item.transName"></Label>
            </GridLayout>
        </ng-template>
     </RadListView>
4

0 回答 0