使用Angular 4在.subscribe（）中从firebase显示实时数据到html

Question

我正在使用 Firebase 的实时数据库在 Angular 4 项目中获取我的数据，以下是我的文件：

trip-data.service.ts：

import { Injectable } from '@angular/core';
declare var firebase: any;
import { Http, Response } from '@angular/http';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { Observable} from 'rxjs/Observable';



@Injectable()
export class TripDataService {

finalItems;
public data: Array<any> =[];
public myData: any[] =[];
  constructor(db: AngularFireDatabase) {

    db.object('/').snapshotChanges().map(action => {
            this.finalItems = { ...action.payload.val() };
            return this.finalItems;
          }).subscribe(item => {
            console.log(item);
            this.myData = item;
            console.log(this.myData);
          }
          );
    }
}

list.component.ts ：

import { Component, OnInit } from '@angular/core';
import { TripDataService } from '../trip-data.service';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [TripDataService]
})
export class ListComponent implements OnInit {
trips;
      constructor(service: TripDataService) {
            // this.trips = service();
            this.trips = service.myData;
            console.log(this.trips);
       }

      ngOnInit() {

      }

}

我从控制台中的 firebase 获得了正确的 result object，一旦我从 Firebase 获得数据，我应该如何在我的 html 文件中显示相同的数据，并且应该在 html 上更新相同的数据Firebase 数据库中的数据更新后立即打开页面？

Answer 1

问题在于myData 变量是Array，默认情况下是[]。 数组是引用类型。因此，在您的组件中，当您在 this.trips 变量中写入 this.trips = service.myData; 时，将存储对该初始空数组的引用。比当您在this.myData 中接收到的数据时，将存储对新数组的引用。

解决方案是使用下一个代码，例如（如果订阅项是一个数组）：

this.myData.length = 0;   // clear array
this.myData.splice(0, 0, ...item);

Answer 2

trip-data.service.ts：

import { Injectable } from '@angular/core';
declare var firebase: any;
import { Http, Response } from '@angular/http';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import { Observable} from 'rxjs/Observable';

@Injectable()
export class TripDataService {

finalItems;
public data: Array<any> =[];
public myData: any[] =[];
  constructor(db: AngularFireDatabase) {

   }

   returnData(){
      return this.db.object('/');
    }
}

list.component.ts ：

import { Component, OnInit } from '@angular/core';
import { TripDataService } from '../trip-data.service';
import { AngularFireDatabase, AngularFireObject, FirebaseObjectObservable } from 'angularfire2/database';
import { Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [TripDataService]
})
export class ListComponent implements OnInit {
trips : FirebaseObjectObservable<any[]>;

     constructor(service: TripDataService) {
            // this.trips = service();
            this.trips = service.returnData();
            console.log(this.trips);
       }

     ngOnInit() {

     }

}

模板文件：

<h2>{{(trips | async)?.name}}</h2>
<p>{{(trips | async)?.department}}</p>