Firestore + AsyncPipe 是否用于 AngularDart 5 中的内部对象？

Question

我一直在研究通过 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();
    }
  }
}

给定以下代码组件：

@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);
  }
}

我希望以下方法有效，但它不起作用：

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

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

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

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

一切正常。这是怎么回事？

Answer 1

答案是 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;
}

Firestore + AsyncPipe 是否用于 AngularDart 5 中的内部对象？

Does Firestore + AsyncPipe for internal object in AngularDart 5?

dart

angular-dart