Angular 4 PouchDB 未更新服务

Question

这是我的服务

export class LunchService {

  private db: any;
  lunches: any = [];

  constructor(
    private serverService: ServerService,
    private configService: ConfigService,
  ) {
    this.db = new PouchDB(configService.config.dbServer + '/' + configService.config.dbName);

    this.db.find({
      selector: { 'type': 'lunch' },
    }).then((result) => {
        // HERE
        this.lunches = result.docs;
    }).catch(function(err) {
      console.log(err);
    });
  }
}

这是我的组件

export class ListingComponent {

  lunches: any = [];

  constructor(
    private lunchService: LunchService
  ) {
    // IS EMPTY WHEN SET IN SERVICE?
    this.lunches = this.lunchService.lunches;
  }
}

为什么午餐服务中对变量的更改没有反映在组件中？控制器中的 lunches 参数不会被填充。

我猜它不在变化检测中？但是如何让它发挥作用呢？

Answer 1

为了解决这个问题，我得到了以下结果。由于服务中的数据将被共享，这似乎是一个令人满意的解决方案，但我不确定这是最好的。

我为 pouch DB 交互提取了一个新服务到 return 一个 observable：

export class PouchDbService {

  private db: any;

  constructor(
    private configService: ConfigService
  ) {
    this.db = new PouchDB(configService.config.dbServer + '/' + configService.config.dbName);
  }

  findDocs(searchParams) {
    return new Observable(observer => {
      this.db.find(searchParams).then((response) => {
        observer.next(response);
      }).catch((err) => {
        console.log(err);
      });
    }
    );
  }
}

现在在我的午餐服务中我创建了一个行为主题：

export class LunchService {

  lunches: any = new BehaviorSubject([]);

  constructor(
    private pouchDb: PouchDbService
  ) {
    this.getLunches().subscribe((response) => {
      this.lunches.next(response['docs']);
    });
  }

  getLunches() {
    return this.pouchDb.findDocs({
      selector: { type: { $eq: 'lunch' } }
    });
  }
}

最后在我的组件中我再次订阅了：

export class ListingComponent implements OnInit {

  lunches: any;

  constructor(
    private lunchService: LunchService
  ) { }

  ngOnInit(): void {
    this.lunchService.lunches.subscribe((lunches) => {
      this.lunches = lunches;
    });
  }

}

它工作正常并且在组件中更新正常。我只是有点不确定这是否是正确的技术？我应该订阅两次吗？

通常（非 pouch 数据库/一般 http 调用）我可以只分配服务变量，而不是行为主题，这会很好地工作并反映组件中的任何更改/UI。但是由于袋子使用 a 然后我必须转换为可观察的并以这种方式获取数据。

有什么想法吗？

Angular 4 PouchDB 未更新服务

Angular 4 PouchDB not updating service

pouchdb

angular2-services

angular2-components