firebase-realtime-database - 使用Angular Dart显示Firebase数据库列表

Question

这是Firebase数据列表的图像，我试图借助以下两篇文章在我的angularDart项目中显示
1)https://qiita.com/tatsu/items/91bf9b01fd3e5d55cd09
2)https://dart.academy/build-a-real-time-chat-web-app-with-dart-angular-2-and-firebase-3/
但是我很难理解并获得预期的结果。
因此，请帮助我知道我在哪里做错什么。



错误

    (anonymous function)    Uncaught Unhandled exception:
EXCEPTION: Error in :0:0
ORIGINAL EXCEPTION: NoSuchMethodError: The method 'ref' was called on null.
Receiver: null
Tried calling: ref("names")
ORIGINAL STACKTRACE:
#0      Object._noSuchMethod (dart:core-patch/object_patch.dart:43)
#1      Object.noSuchMethod (dart:core-patch/object_patch.dart:47)
#2      new DatabaseService (package:AngularDart_Firebase_Demo/service/database_service.dart:22:34)
#3      _ViewAppComponentHost0.build (package:AngularDart_Firebase_Demo/app_component.template.dart:465:32)
#4      AppView.createHostView (package:angular/src/core/linker/app_view.dart:233:12)
#5      DebugAppView.createHostView (package:angular/src/debug/debug_app_view.dart:89:34)
#6      ComponentFactory.create (package:angular/src/core/linker/component_factory.dart:77:21)
#7      ApplicationRefImpl.bootstrap.<anonymous closure> (package:angular/src/core/application_ref.dart:348:38)
#8      ApplicationRefImpl.run.<anonymous closure> (package:angular/src/core/application_ref.dart:319:26)
#9      _rootRun (dart:async/zone.dart:1116)
#10     _ZoneDelegate.run (dart:async/zone.dart:675)
#11     NgZone._run (package:angular/src/core/zone/ng_zone.dart:175:21)
#12     _CustomZone.run (dart:async/zone.dart:1001)
#13     NgZone.run (package:angular/src/core/zone/ng_zone.dart:304:23)
#14     ApplicationRefImpl.run (package:angular/src/core/application_ref.dart:317:10)
#15     ApplicationRefImpl.bootstrap (package:angular/src/core/application_ref.dart:346:12)
#16     coreLoadAndBootstrap.<anonymous closure> (package:angular/src/core/application_ref.dart:92:19)
<asynchronous suspension>
#17     ApplicationRefImpl.run.<anonymous closure> (package:angular/src/core/application_ref.dart:319:26)
#18     _rootRun (dart:async/zone.dart:1120)
#19     _ZoneDelegate.run (dart:async/zone.dart:675)
#20     NgZone._run (package:angular/src/core/zone/ng_zone.dart:175:21)
#21     _CustomZone.run (dart:async/zone.dart:1001)
#22     NgZone.run (package:angular/src/core/zone/ng_zone.dart:304:23)
#23     ApplicationRefImpl.run (package:angular/src/core/application_ref.dart:317:10)
#24     coreLoadAndBootstrap (package:angular/src/core/application_ref.dart:87:23)
<asynchronous suspension>
#25     bootstrapStatic (package:angular/src/platform/bootstrap.dart:129:10)
#26     main (http://localhost:59274/main.dart:9:3)

ERROR CONTEXT:
Instance of 'DebugContext'

#0      DebugAppView._rethrowWithContext (package:angular/src/debug/debug_app_view.dart:319:9)
#1      DebugAppView.createHostView (package:angular/src/debug/debug_app_view.dart:91:12)
#2      ComponentFactory.create (package:angular/src/core/linker/component_factory.dart:77:21)
#3      ApplicationRefImpl.bootstrap.<anonymous closure> (package:angular/src/core/application_ref.dart:348:38)
#4      ApplicationRefImpl.run.<anonymous closure> (package:angular/src/core/application_ref.dart:319:26)
#5      _rootRun (dart:async/zone.dart:1116)
#6      _ZoneDelegate.run (dart:async/zone.dart:675)
#7      NgZone._run (package:angular/src/core/zone/ng_zone.dart:175:21)
#8      _CustomZone.run (dart:async/zone.dart:1001)
#9      NgZone.run (package:angular/src/core/zone/ng_zone.dart:304:23)
#10     ApplicationRefImpl.run (package:angular/src/core/application_ref.dart:317:10)
#11     ApplicationRefImpl.bootstrap (package:angular/src/core/application_ref.dart:346:12)
#12     coreLoadAndBootstrap.<anonymous closure> (package:angular/src/core/application_ref.dart:92:19)
<asynchronous suspension>
#13     ApplicationRefImpl.run.<anonymous closure> (package:angular/src/core/application_ref.dart:319:26)
#14     _rootRun (dart:async/zone.dart:1120)
#15     _ZoneDelegate.run (dart:async/zone.dart:675)
#16     NgZone._run (package:angular/src/core/zone/ng_zone.dart:175:21)
#17     _CustomZone.run (dart:async/zone.dart:1001)
#18     NgZone.run (package:angular/src/core/zone/ng_zone.dart:304:23)
#19     ApplicationRefImpl.run (package:angular/src/core/application_ref.dart:317:10)
#20     coreLoadAndBootstrap (package:angular/src/core/application_ref.dart:87:23)
<asynchronous suspension>
#21     bootstrapStatic (package:angular/src/platform/bootstrap.dart:129:10)
#22     main (http://localhost:59274/main.dart:9:3)

database_service.dart

import 'dart:async';
import 'dart:math';
import 'package:AngularDart_Firebase_Demo/src/name.dart';
import 'package:angular/angular.dart';
import 'package:firebase/firebase.dart' as fb;

@Injectable()
class DatabaseService {
  fb.Database _fbDatabase;
  fb.DatabaseReference _fbDatabaseRef;
  final List<Name> names = [];
  int _maxId = 0;

  DatabaseService() {
    fb.initializeApp(
      apiKey: "AIzaSyBQ3GFAEHOLUNS72C4Sii4iZbRcag6o9ZZ",
      authDomain: "angulardart-firebase-demo.firebaseapp.com",
      databaseURL: "https://angulardart-firebase-demo.firebaseio.com",
      storageBucket: "angulardart-firebase-demo.appspot.com",

    );
    _fbDatabaseRef = _fbDatabase.ref("names");

    try {
    // Listening for updates
    _fbDatabaseRef.onChildAdded.listen((e) {
    Name name = new Name.fromJson(e.snapshot.val());
    _maxId = max(name.id, _maxId);
    names.add(name);
    });
    _fbDatabaseRef.onChildRemoved.listen((e) {
    Name name = new Name.fromJson(e.snapshot.val());
    names.remove(names.firstWhere((h) => h.id == name.id));
    });
    _fbDatabaseRef.onChildChanged.listen((e) {
    Name name = new Name.fromJson(e.snapshot.val());
    names
        .firstWhere((h) => h.id == name.id)
        .title = name.title;
    });
    } catch (e) {
      throw _handleError(e);
    }
  }

  Future<Name> getHero(int id) async {
    // It's possible the _heroes is not ready on the page load.
    final name = names.firstWhere((name) => name.id == id, orElse: () => null);
    if (name != null) {
      return new Future.value(name);
    } else {
      // Try to fetch him from Firebase.
      // It might not the best design, while Firebase can be expected to handle a cached hero data effectively.
      // Should be added index on id later.
      final queryEvent = await _fbDatabaseRef.orderByChild('id').equalTo(id).once('value');
      final snapshot = queryEvent.snapshot.val();
      return new Name.fromJson(snapshot.values.first);
    }
  }

  Future<Name> update(Name name) async {
    try {
      var e = await _fbDatabaseRef.orderByChild('id').equalTo(name.id).once('value');
      e.snapshot.forEach((child) {
        child.ref.update(name.toJson());
      });
      return name;
    } catch (e) {
      throw _handleError(e);
    }
  }

  Future<Null> delete(int id) async {
    try {
      var e = await _fbDatabaseRef.orderByChild('id').equalTo(id).once('value');
      e.snapshot.forEach((child) {
        child.ref.remove();
      });
    } catch (e) {
      throw _handleError(e);
    }
  }

  Exception _handleError(dynamic e) {
    print(e); // for demo purposes only
    return new Exception('Server error; cause: $e');
  }
}

app_component.dart

import 'package:AngularDart_Firebase_Demo/service/database_service.dart';
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [
    CORE_DIRECTIVES,
    materialDirectives,
  ],
  providers: const [
    materialProviders,
    DatabaseService,
  ],
)
class AppComponent {
  final title = 'List of names!';
  final DatabaseService dbService;

  AppComponent(DatabaseService this.dbService);
}

名称.dart

class Name {
  final int id;
  String title;

  Name(this.id, this.title);

  factory Name.fromJson(Map<String, dynamic> name) =>
      new Name(_toInt(name['id']), name['name']);

  Map toJson() => {'id': id, 'title': title};
}

int _toInt(id) => id is int ? id : int.parse(id);

app_component.html

<h1>{{title}}</h1>
<h2>List of names</h2>
<material-list>
    <material-list-item class="names"
                        *ngFor="let name of dbService.names"
                        [class.selected]="name === selectedName"
                        (trigger)="onSelect(name)">
        <div>{{name.id}}</div>
        <div>{{name.title}}</div>
    </material-list-item>
</material-list>

初始化数据库 _fbDatabase = fb.database();后，它可以工作，但是仍然没有显示正在显示标题的id。


database_service.dart

import 'dart:async';
import 'dart:math';
import 'package:AngularDart_Firebase_Demo/src/name.dart';
import 'package:angular/angular.dart';
import 'package:firebase/firebase.dart' as fb;

@Injectable()
class DatabaseService {
  fb.Database _fbDatabase;
  fb.DatabaseReference _fbDatabaseRef;
  final List<Name> names = [];
  int _maxId = 0;

  DatabaseService() {
    fb.initializeApp(
      apiKey: "AIzaSyBQ3GFAEHOLUNS72C4Sii4iZbRcag6o6iY",
      authDomain: "angulardart-firebase-demo.firebaseapp.com",
      databaseURL: "https://angulardart-firebase-demo.firebaseio.com",
      storageBucket: "angulardart-firebase-demo.appspot.com",

    );
    _fbDatabase = fb.database();
    _fbDatabaseRef = _fbDatabase.ref("names");

    try {
    // Listening for updates
    _fbDatabaseRef.onChildAdded.listen((e) {
    Name name = new Name.fromJson(e.snapshot.val());
    _maxId = max(name.id, _maxId);
    names.add(name);
    });
    _fbDatabaseRef.onChildRemoved.listen((e) {
    Name name = new Name.fromJson(e.snapshot.val());
    names.remove(names.firstWhere((h) => h.id == name.id));
    });
    _fbDatabaseRef.onChildChanged.listen((e) {
    Name name = new Name.fromJson(e.snapshot.val());
    names
        .firstWhere((h) => h.id == name.id)
        .title = name.title;
    });
    } catch (e) {
      throw _handleError(e);
    }
  }

  Future<Name> getHero(int id) async {
    // It's possible the _heroes is not ready on the page load.
    final name = names.firstWhere((name) => name.id == id, orElse: () => null);
    if (name != null) {
      return new Future.value(name);
    } else {
      // Try to fetch him from Firebase.
      // It might not the best design, while Firebase can be expected to handle a cached hero data effectively.
      // Should be added index on id later.
      final queryEvent = await _fbDatabaseRef.orderByChild('id').equalTo(id).once('value');
      final snapshot = queryEvent.snapshot.val();
      return new Name.fromJson(snapshot.values.first);
    }
  }

  Future<Name> update(Name name) async {
    try {
      var e = await _fbDatabaseRef.orderByChild('id').equalTo(name.id).once('value');
      e.snapshot.forEach((child) {
        child.ref.update(name.toJson());
      });
      return name;
    } catch (e) {
      throw _handleError(e);
    }
  }

  Future<Null> delete(int id) async {
    try {
      var e = await _fbDatabaseRef.orderByChild('id').equalTo(id).once('value');
      e.snapshot.forEach((child) {
        child.ref.remove();
      });
    } catch (e) {
      throw _handleError(e);
    }
  }

  Exception _handleError(dynamic e) {
    print(e); // for demo purposes only
    return new Exception('Server error; cause: $e');
  }
}

Answer 1

此字段永远不会初始化:

fb.Database _fbDatabase;

在上一行之前添加此行

_fbDatabaseRef = fb.database();
_fbDatabaseRef = _fbDatabase.ref("names");

另请参阅 https://github.com/firebase/firebase-dart/blob/master/example/realtime_database/index.dart