时间戳

首页 > 解决方案 > Angular，如何在没有更改检测问题的情况下将值从 HTML 模板传递到组件

angular - Angular，如何在没有更改检测问题的情况下将值从 HTML 模板传递到组件

问题描述

我在尝试从 HTML 模板中检索值以进行计算时遇到问题；但是，我没有找到好的解决方案。当我在*ngFor模板中添加一个方法时，它会导致可怕的更改检测问题，并且该方法被调用了 100 次。我也不能使用属性绑定，因为它在同一个组件中，而不是一个子组件。我正在遍历一个大型 JSON 对象数组，需要找到issueNumber每个对象并调用一个新服务。以下是我如何处理更改检测问题的示例。这可能是一个简单的解决方案，但它打败了我。

谢谢大家。

HTML

 <div *ngFor="let m of issues"> 
  .....
 {{findAdditionalIssues(m.issueNumber)}}

  .....
 </div

零件

  findAdditionalIssues(issueNumber: any)
  {
   callnewservice.get(issueNumber).subscribe ()
  }

标签： angularrxjs

解决方案

那么最好选择所有的issueNumber，然后为它们中的每一个调用callnewservice.get(). 您可以使用 aforkJoin并行触发所有这些请求，订阅者将等待所有结果返回，然后再发出响应。

forkJoin[issues.select(m => callnewservice.get(m.issueNumber))]
  .subscribe(additionalIssues => console.log(additionalIssues))

fork加入说明：

当您有一组可观察对象并且只关心每个对象的最终发出值时，最好使用此运算符。一个常见的用例是，如果您希望在页面加载（或其他事件）时发出多个请求，并且只想在收到所有人的响应时采取行动。通过这种方式，它类似于您使用 Promise.all 的方式。

推荐阅读