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

Posted 2023-03-13

【中文标题】Angular ngOnchanges 调用方法，但方法不调用服务或输出结果

【英文标题】：Angular ngOnchanges calls method, but method does not call service or output results

【发布时间】：2022-01-18 20:22:42

【问题描述】：

我对我的应用程序的某个部分发生的事情感到困惑。我有一个使用 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" ...

【参考方案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);

【讨论】：

我进行了编辑以指定异步绑定。我还尝试了您的建议进行测试，实际上该 api 现在被调用了两次，正如我所期望的那样。为什么我使用异步绑定时没有发生这种情况？

（好吧，就像我想的那样......）您可以在我的回答开始时看到方式：当 NgOnIt 执行 fetchResults 方法时（我的意思是，第二次执行该方法），resultList $ 被“重新分配”给一个新的 observable 对象，所以第一次分配丢失了……所以你只能得到第二次的值。

我刚刚用适合您要求的可能解决方案编辑了我的答案。试试看，祝你好运！

对不起，但我认为你有它倒退。第一个电话来自ngOnChanges。第二个电话来自ngOnInit。第一次调用没有命中 api。第二个电话确实如此。我想知道为什么当我使用异步绑定到模板而不使用subscribe 时，第一次调用不会触发 api。