title: first() operand does not publish after a second call inside a function
body: <p>I don't understand why this does not work but the alternatives below do.</p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Subject, Observable } from 'rxjs';
  import { first } from 'rxjs/operators';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    id = 0;
    obs = new Subject();
  
    changeValue() {
      this.fakeApiCall(this.id++)
        .pipe(first())
        .subscribe(this.obs);
    }
  
    fakeApiCall(id: number) {
      return new Observable(observer =&gt; {
        console.log('called with id ' + id);
        observer.next({ items: [id, Math.random()] });
      });
    }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;h1&gt;
      &lt;div *ngIf="(obs | async) as v"&gt;
          &lt;ul&gt;
              &lt;li *ngFor="let item of v.items"&gt;
                  {{ item }}
              &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;ul&gt;
              &lt;li *ngFor="let item of v.items"&gt;
                  {{ item }}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div *ngIf="(obs | async) as v"&gt;
          &lt;ul&gt;
              &lt;li *ngFor="let item of v.items"&gt;
                  {{ item }}
              &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;ul&gt;
              &lt;li *ngFor="let item of v.items"&gt;
                  {{ item }}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;button (click)="changeValue()"&gt;increase counter&lt;/button&gt;
  &lt;/h1&gt;
  </code></pre>
  
  <p>When I'm clicking the "increase counter" button, it first gets values, but not afterward, while these alternatives work just fine:</p>
  
  <pre><code>changeValue() {
      this.fakeApiCall(this.id++)
        .subscribe(this.obs)
        .unsubscribe();
    }
  </code></pre>
  
  <p>or</p>
  
  <pre><code>changeValue() {
      this.fakeApiCall(this.id++)
        .pipe(take(2)) // NOTES: if I write take(1), it has the same effect.
        .subscribe(this.obs);
    }
  </code></pre>
  
  <p>I am confused is this a bug or what's really going on here?</p>
  
  <p>EDIT: if you want stackblitz url, here: <a href="https://stackblitz.com/edit/angular-28eyiy" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-28eyiy</a></p>