从Firebase检索数据并使用nativescript listview进行渲染

时间:2020-05-09 09:00:47

标签: listview firebase-realtime-database nativescript nativescript-angular nativescript-firebase

我正在使用nativescript-firebase-plugin从firebase获取数据。数据库实例的屏幕截图如下。enter image description here

我正在跟踪Jen Looper's blog.中的一个示例,以下是 firebase.service.ts 的代码:

 getMyWishList(): Observable<any> {
    return new Observable((observer: any) => {
      let path = 'movie/';

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


    handleSnapshot(data: any) {
      this._allItems = [];
      if (data) {
        for (let id in data) {
             this._allItems.push(data);
        }
      this.publishUpdates();
    }
    return this._allItems;
    }


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

使用

在我的home.componenet.ts中调用了此服务
`        
this.datas$ = <any>this.firebaseService.getMyWishList(); 
`

然后在 home.component.html 中尝试使用nativescript listview呈现数据库实例数据。

<StackLayout class="card">
      <ListView [items]="datas$ | async"  height="300">
          <GridLayout>
                <ng-template let-item="item">                  
                  <GridLayout columns="auto,*,auto">
                      <Label class="m-5"   col="1" [text]="item.link"></Label>  //Line 1
                      <Label class="m-5"   col="1" [text]="item.name"></Label>  //Line2
                  </GridLayout>                 
              </ng-template>
          </GridLayout>
      </ListView>
  </StackLayout>

`

但是当我使用item.link或item.name时listView是空的。但是当我使用item.video1.link时它可以工作。现在我推断电影文档是listView中的项目,但是我需要在其中创建文档 / movie作为项并动态呈现其值。 另外,如果listView以这种方式工作,那么它有什么用,因为我们只能呈现一行文档。请帮助我在此处查找问题。

0 个答案:

没有答案