在Angular Dart中填充Firebase数据库列表

Question

尝试向https://dart.academy/build-a-real-time-chat-web-app-with-dart-angular-2-and-firebase-3/学习，但在实施时

• 错误-1

  while debug GET http://localhost:56991/main.dart 404 (Not Found)

• 错误-2

  

firebase_service.dart

import 'package:angular/angular.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:yns_admin/category_component/category.dart';

@Injectable()
class FirebaseService {

  fb.Database fbDatabase;
  fb.DatabaseReference databaseReference;

  List<Category> categories;

  FirebaseService() {
    fb.initializeApp(
      apiKey: "AIzaSyBOShlCgUeqTL99n32ssasasasasa",
      authDomain: "yns-app.firebaseapp.com",
      databaseURL: "https://yns-app.firebaseio.com",
      storageBucket: "yns-app.appspot.com",
    );

    fbDatabase = fb.database();
    databaseReference = fbDatabase.ref("categories");
  }

  void showCategories() {
    categories = [];
    databaseReference.onChildAdded.listen(newCategory);
  }

  void newCategory(fb.QueryEvent event) {

    Category category = new Category.fromMap(event.snapshot.val());
    categories.add(category);
  }
}

地图代码来自 category.dart

  class Category {

  final String categoryTitle;

  Category(this.categoryTitle);

  Category.fromMap(Map map, this.categoryTitle) {}

  Map toMap() =>{
    "categoryTitle":categoryTitle
  };
}

main.dart

import 'package:angular/angular.dart';
import 'package:yns_admin/app_component/app_component.dart';

void main() {
  bootstrap(AppComponent);
}

Answer 1

Q1：http://localhost:56991/main.dart应为404，这是预期的行为。如果您只是访问http://localhost:56991，则应该会看到您的组件。有关此问题的详细信息，请查看Angular Dart official doc。

Q2：我认为您需要修改new Category.fromMap()功能以仅检查快照值。不确定你将如何做到这一点，但它应该相当容易。