Question

我在视图中使用异步管道，以在视图中动态加载数据。但是，它没有加载任何数据。

我需要在页面中几次更改可观察值，例如重新加载页面，加载更多值，并根据新闻类别更改新闻内容。

我使用ChangeDetectorRef，detectChanges（），但没有任何运气。

ngOnInit() {
   if (this.isFirstRun) {
     this.items$ = this.apiService.getNewsByCategory(
                  this.categoryId = (this.categoryId === 0 ? 1 : this.categoryId));
     this.cg.detectChanges();
   }
 }

//NgOnChanges

ngOnChanges(changes: SimpleChanges) {
if (this.isFirstRun) {
  const chg = changes.categoryId;
  this.items$ = this.apiService.getNewsByCategory(chg.currentValue);
  this.cg.detectChanges();
}

}

// In the views i used these things

<div *ngIf="(items$| async) as news ; else loading">
// View stuff here

</div>

在检测到任何更改（即CategoryId为更改）时，必须重新加载

items $。在这种情况下不起作用。

但是ngOnInit可以正常工作。

非常感谢您的帮助，没有任何想法在我的脑海中产生。

Answer 1

针对您的问题，有一种更好的模式，即使用单独的subject作为触发器，并且您无需手动检测更改即可使异步管道正常工作

  refreshItems$ = new Subject()

  items$ = this.refreshItems$.asObservable().pipe(
    switchMap(param => this.apiService.getNewsByCategory(param)))
  constructor() { }
  ngOnInit() {
    if (this.isFirstRun) {
      this.refreshItems$.next()
    }
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.isFirstRun) {
      this.refreshItems$.next(changes.categoryId)
    }
  }

Answer 2

如果默认更改检测器未检测到您的更改，则它将不会调用ngOnChanges。因此，如果是这种情况，则可以使用ngDoCheck手动检查更改。

异步管道无法与相同的可观察对象一起使用

2 个答案: