title: Async Pipe in Template inside ngFor block triggers http GET calls loop
body: <p>I have the following component Template:</p>
  
  <pre><code>&lt;div *ngFor="let ctrl of data; trackBy:ctrl?.Id"&gt;
     &lt;div *ngIf="getNext(ctrl.nextDate) | async as next"&gt;
          &lt;span&gt;{{next | date: 'dd.MM.yyyy'}}&lt;/span&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>getNext() is a simple method returning an <code>Observable&lt;Date&gt;</code>:</p>
  
  <pre><code>public getNext(deadline: string): Observable&lt;Date&gt; {
     return this.http.get&lt;Date&gt;(`${this.config.apiEndpoint}/api/meeting?deadline=${deadline}`);
  }
  </code></pre>
  
  <p>My goal would be to invoke the method and subscribe to the observable with the async pipe in the template. However when I run the application endless GET and OPTIONS requests are generated.</p>
  
  <p>Also if I place the method call outside the ngFor the same happen. The call would need to be executed inside the ngFor as the parameter is different for each collection item.</p>
  
  <p>Why the method is simply called once and no more calls generated after the subscription?</p>