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

这是我的compnent

export class ListingComponent {
  lunches: any = [];
  constructor(
    private lunchService: LunchService
  ) {
    // IS EMPTY WHEN SET IN SERVICE?
    this.lunches = this.lunchService.lunches;
  }
}

为什么午餐服务中变量的更改不反映组成部分？控制器中的午餐参数不会被人口组成。

我猜这不在更改检测中吗？但是如何使这项工作？

Answer 1

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

我为小袋DB交互提取了一项新服务，以返回可观察的：

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

它可以正常运行，并且在组件中更新。我只是不确定这是正确的技术吗？我应该订阅两次吗？

通常(非袋DB/常规HTTP调用(我可以分配服务变量，而无需行为主题，这将正常工作并反映组件/UI中的任何更改。但是，由于小袋使用了A，因此我必须转换为可观察的，并以这种方式获取数据。

有什么想法？