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获得了正确的结果对象，一旦我从Firebase获取数据，我应该如何在我的html文件中显示相同的数据，同样应该在html上更新Firebase数据库中的数据更新后的页面？

Answer 1

问题是myData变量是Array，默认情况下是[]。数组是引用类型。因此，当您在this.trips = service.myData;变量中编写this.trips时，在您的组件中将存储对该初始空数组的引用。比将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>

使用Angular 4

2 个答案: