Firestore&x2B；AngularDart 5中内部对象的异步管道？

我一直在为firestore开发一个使用共享dart包的东西，遇到了一个有趣的问题

我有一个基本如下的业务逻辑对象：

class HomeBloc {
  final Firestore _firestore;
  CollectionReference _ref;

  HomeBloc(this._firestore) {
    _ref = _firestore.collection('test');
  }

  Stream<List<TestModel>> get results {
    return _ref.onSnapshot.asyncMap((snapshot) {
      return snapshot.docs.map((ds) => TestModel(ds.get('data') as String)).toList();
    }
  }
}

class HomeBloc{
最终消防仓库(Firestore);；
收集参考_ref；
HomeBloc（此.\u firestore）{
_ref=_firestore.collection（'test'）；
}
流得到结果{
返回_ref.onSnapshot.asyncMap（（快照）{
返回snapshot.docs.map（（ds）=>TestModel（ds.get（'data'）作为字符串））.toList（）；
}
}
}

给定以下代码组件：

@Component(
  selector: 'my-app',
  templateUrl: 'app_component.html',
  directives: [coreDirectives],
  pipes: [commonPipes]
)
class AppComponent extends OnInit {
  HomeBloc bloc;
  Stream<List<TestModel>> results;

  AppComponent() {

  }

  @override
  void ngOnInit() {
    print("Initializing component");
    fb.initializeApp(
      //...
    );

    getData();
  }

  Future<void> getData() async {
    final store = fb.firestore();
    bloc = HomeBloc(store);
  }
}

@组件(
选择器：“我的应用程序”，
templateUrl:'app_component.html'，
指令：[核心指令]，
管道：[普通管道]
)
类AppComponent扩展了OnInit{
家庭集团；
流结果；
AppComponent（）{
}
@凌驾
void ngOnInit（）{
打印（“初始化组件”）；
fb.initializeApp(
//...
);
getData（）；
}
Future getData（）异步{
最终存储=fb.firestore（）；
集团=家庭集团（商店）；
}
}

我希望以下方法能奏效，但它不能：

<div *ngIf="bloc != null">
  <h2>Loaded properly</h2>
  <ul>
    <li *ngFor="let item of bloc.results | async">
    {{item.data}}
    </li> 
  </ul>
</div>

装载正确


{{item.data}

但是，如果改为将getData和html更改为以下内容：

Future<void> getData() async {
  final store = fb.firestore();
  bloc = HomeBloc(store);
  results = bloc.results;  
}

// HTML
<ul *ngFor="let item of results | async">

Future getData（）异步{
最终存储=fb.firestore（）；
集团=家庭集团（商店）；
结果=整体结果；
}
//HTML

---

一切正常。这里发生了什么？

答案是每次访问get方法时，get方法都会创建一个新列表，这并没有给Angelan在重置之前呈现项目的机会。HomeBloc的正确实现：

class HomeBloc {
  final Firestore _firestore;
  CollectionReference _ref;

  HomeBloc(this._firestore) {
    _ref = _firestore.collection('test');
    _results = _ref.onSnapshot.asyncMap((snapshot) {
      return snapshot.docs.map((ds) => TestModel(ds.get('data') as String)).toList();
  }

  Stream<List<TestModel>> _results;
  Stream<List<TestModel>> get results => _results;
}

class HomeBloc{
最终消防仓库(Firestore);；
收集参考_ref；
HomeBloc（此.\u firestore）{
_ref=_firestore.collection（'test'）；
_结果=_ref.onSnapshot.asyncMap（（快照）{
返回snapshot.docs.map（（ds）=>TestModel（ds.get（'data'）作为字符串））.toList（）；
}
流结果；
流获取结果=>\u结果；
}

答案是每次访问get方法时，get方法都会创建一个新列表，这并没有给Angular在重置之前呈现项目的机会。HomeBloc的正确实现：

class HomeBloc {
  final Firestore _firestore;
  CollectionReference _ref;

  HomeBloc(this._firestore) {
    _ref = _firestore.collection('test');
    _results = _ref.onSnapshot.asyncMap((snapshot) {
      return snapshot.docs.map((ds) => TestModel(ds.get('data') as String)).toList();
  }

  Stream<List<TestModel>> _results;
  Stream<List<TestModel>> get results => _results;
}

class HomeBloc{
最终消防仓库(Firestore);；
收集参考_ref；
HomeBloc（此.\u firestore）{
_ref=_firestore.collection（'test'）；
_结果=_ref.onSnapshot.asyncMap（（快照）{
返回snapshot.docs.map（（ds）=>TestModel（ds.get（'data'）作为字符串））.toList（）；
}
流结果；
流获取结果=>\u结果；
}