在 Angular2 中发出过多 HTTP 请求的页面答案

【问题标题】：Page making too many HTTP Requests in Angular2在 Angular2 中发出过多 HTTP 请求的页面
【发布时间】：2017-06-15 19:18:47
【问题描述】：

这是我的 .ts 代码

 userCount(event_id){
    this.http.get('http://localhost/getCount.php?event_id='+event_id)
      .subscribe(res=>{
        this.eventUserCount = res.json();
        console.log("User NUM :: ", this.eventUserCount) 
        return this.eventUserCount
      });

  }

这是调用上述函数的 HTML 代码：

<div *ngFor="let event of events">
....    
<ion-col col-6 center text-center>
    <button  ion-button>
        <div> {{ userCount(event.event_id) }} Users</div>
    </button>
</ion-col>
...
</div>

我收到来自服务器的无限响应（从 console.log 中可以看出）我想为每个列表项发出单独的 http 请求并显示每个事件的计数，而不是这个无限的请求和响应循环。谁能帮我解决这个问题？？

【问题讨论】：

标签： javascript angular ionic-framework ionic3

【解决方案1】：

"不要在绑定中使用函数。你的函数将被调用每个变化检测周期。并且 Angular 在开发模式下运行 x2 个周期"

意味着永远不要使用 {{ Fun() }} 它会降低你的表现和它的坏处事方式。你在 For 循环中的调用。这很糟糕。

你可以这样试试

创建事件子组件并传递事件对象

或

在 *ngFor 渲染之前创建完整的 Object 并传递给 *ngFor

Call a function inside ngFor in angular2

【讨论】：

第二个选项听起来不错……但我已经在 ngFor 循环上使用了……我将如何使用另一个 for 循环来遍历已完成的对象。一些代码会很有帮助。
你是如何接收事件对象的？从服务。我应该使用你的组件，否则我可能会朝错误的方向扔球。

【解决方案2】：

您可以在 angularjs 1 中使用类似于 ng-init 的内容。

创建一个这样的指令

@Directive({
  selector: '[initCall]'
})
export class initCall {

  constructor() {}
  ngOnInit() {      
     this.initCall()
  } 

}

像这样修改html

<div *ngFor="let event of events">
....    
<ion-col col-6 center text-center>
    <button  ion-button>
        <div  [initCall]="userCount(event.event_id)"> Users</div>
    </button>
</ion-col>
...
</div>

【讨论】：

Thisi 在 Angular2 中显示错误。你能给 angular2 提供相同的代码吗this.initCall() 给出错误。

【解决方案3】：

您会收到无限的 HTTP 请求，因为 ionic 视图总是从其组件中寻找更改。所以总是调用方法userCount。这是正常的。从视图中调用方法/使用管道是不好的做法。它会给您的应用带来性能问题。

您可以使用以下任何方式从 HTTP 请求中获取数据并保存它们

let userCounts: Map<number, any> = new Map<number, any>(); // define this as global

...

public saveUserCount(){
   for(let event of this.events) {
      this.userCounts.set(event.event_id,this.userCount(event.event_id));
   }
}

在onInit()方法中调用这个方法。然后您可以使用userCounts 在视图中进行迭代。

【讨论】：