Angular ngOnchanges 调用方法，但方法不调用服务或输出结果

Question

我对我的应用程序的某个部分发生的事情感到困惑。我有一个使用 ngOnChanges 的组件。当组件加载时，ngOnchanges 在 ngOnInit 之前触发。 ngOnChanges 和 ngOnInit 都调用某个方法（fetchResults），该方法调用 api 服务以使用可观察的返回来获取一些数据。我在调用服务时有一个tap，用于控制台记录返回的数据，并且在 vs 中为被调用的 api 方法设置了一个断点。

当从ngOnChanges 钩子对fetchResults 进行初始调用时，服务不返回任何数据并且不命中api 断点。但是，当ngOnInit钩子被触发，fetchResults被第二次调用时，api断点被命中，控制台日志显示返回的数据。

为什么会这样？我期待任何对fetchResults 的调用都可以访问 api 并返回数据。我已经验证了所需的参数正在被传递。来自ngOnChanges 的调用和来自ngOnInit 的调用是相同的。

示例代码：

  ngOnInit() {
    console.log('fetchResults called from ngOnInit')
    this.fetchResults(this.itemId);
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges called with changes value: ', changes)
    this.fetchResults(changes['propName'].currentValue)
  }

fetchResults(itemId){
    console.log('fetchResults function called with competitionId: ', itemId)
    
    this.resultList$ = this.dataservice.getResults(itemId)
      .pipe( 
        map( result => {
          return result.map(
            item => {
              return item;
            }
          )
        }),
        tap(val => console.log(' fetchResults function - the value of returned result object: ', val))
      )
  }

带有异步绑定的结果组件 Html：

... this.resultList$ | async" ...

Answer 1

我猜第二次调用 fetchResults 方法（当 ngOnChanges 执行它时），您的可观察属性 resultList$ 被“重新分配”给一个新的可观察对象。

---

无论如何，如果您想测试您是否真的两次都获取数据，请更改您的 fetchResults 方法以随时获取不同的订阅（仅用于测试）：

fetchResults(itemId){
    console.log('fetchResults function called with competitionId: ', itemId)
    
    this.dataservice.getResults(itemId)
      .pipe( 
        map( result => {
          return result.map(
            item => {
              return item;
            }
          )
        })
      ).subscribe(
         val => console.log(' fetchResults function - the value of returned result object: ', val)
      )}

---

最后，如果你想“修复”它，你可以这样做：

// In your declaration of Class attributes:
get resultList$(itemId){

   return this.dataservice.getResults(itemId)
      .pipe( 
        map( result => {
          return result.map(
            item => {
              return item;
            }
          )
        }),
        tap(val => console.log(' fetchResults function - the value of returned result object: ', val))
   );

}

Class...

Cosntructor....

ngOnInit() {
    console.log('fetchResults called from ngOnInit')
    this.resultList$ = this.itemId;
}

ngOnChanges(changes: SimpleChanges) {
    console.log('ngOnChanges called with changes value: ', changes)
    this.resultList$ = changes['propName'].currentValue);
}