javascript - 访问 Firebase 对象并将其映射到基于 Angular 的应用程序中的 UI

Question

我正在尝试从我的 Nativescript Angular 应用程序访问 firebase 实时数据库中的这个数据样本（评论），以在下面的 xml 代码中呈现评论。

此代码适用于导入到我的数据库的 JSON 数据，但不适用于启动 push() 请求后由 firebase 创建的自动生成的字母数字 ID。（如果您用整数替换字符串 id，则代码可以正常工作）。

Firebase 屏幕截图。

打字稿文件

export class DishdetailComponent implements OnInit {
  
    dish: Dish;
    id: number;
    comment: Comment;
    errMess: string;
    avgstars: string; 
    numcomments: number; 
    favorite: boolean;  

    showComments: boolean = false;

    cardImage: View;
    commentList: View;
    cardLayout: View;

    constructor(private dishservice: DishService,
      private route: ActivatedRoute,
      private routerExtensions: RouterExtensions,
      private favoriteService: FavoriteService, 
      private vcRef: ViewContainerRef,
      private modalService: ModalDialogService, 
      private http: HttpClient,
      private page: Page, 
      @Inject('baseURL') private baseURL) { }
  
    ngOnInit() {
      this.route.params
        .pipe(switchMap((params: Params) => this.dishservice.getDish(params['id'])))
        .subscribe(dish => {
          this.dish = dish 
          this.favorite = this.favoriteService.isFavorite(this.dish.id); 
          
            //compute the average of the comments and the render the length of the array
            const commentIds  = Object.keys(this.dish.comments);
            this.numcomments =  commentIds.length;           
            let total = 0; 
            commentIds.forEach(commentId => total += this.dish.comments[commentId].rating); 
            this.avgstars = (total/this.numcomments).toFixed(2) || null;
             },
            errmess => this.errMess = <any>errmess); 
          }

        onDrawerButtonTap(): void {
            const sideDrawer = <RadSideDrawer>app.getRootView();
            sideDrawer.showDrawer();
        }

**Html template file**

  <Label row="1" height="40" class="p-10 m-t-10 h3" text="Comments"></Label>
        <ListView id="commentList" 
        row="2"
        height="300"
        [items]="dish.comments" 
        class="list-group p-10"
        [visibility]="(showComments) ? 'visible': 'collapsed'">
            <ng-template let-comment="item">
                <StackLayout class="list-group-item">
                    <Label class="list-group-item-heading" [text]="comment.comment" textWrap="true"></Label>
                    <StackLayout orientation="horizontal">
                        <Label class="list-group-item-text" [text]="comment.rating"></Label>      
                        <Label class="list-group-item-text" text=" Stars"></Label>
                    </StackLayout>
                    <StackLayout orientation="horizontal">
                    <Label class="list-group-item-text" [text]="'-- ' + comment.author + ', '"></Label>      
                    <Label class="list-group-item-text" [text]="comment.date | date"></Label>
                    </StackLayout>      
                </StackLayout>
            </ng-template>
        </ListView>

我在我的代码中做错了什么？非常感谢您的审查和更正。

标签： javascriptangularfirebase