title: Observable, async and other
body: <p>After one full day cracking my head trying to find a suitable solution, I'm finally here asking for help.</p>
  
  <p><strong>WHAT I NEED</strong>
  In a service I have to provide a function returning an array of objects; first time these objects are retrieved from a webservice with HttpClient, but then I'd like to store them in a local variable to avoid consuming time and traffic every time I call this service function.<br>
  Finally I have to show these objects in a <code>&lt;select *ngFor</code> tag and set default value after values are set.</p>
  
  <p><strong>FIRST ATTEMPT</strong>  </p>
  
  <p><strong>service.ts</strong>  </p>
  
  <pre><code>  stati = null;
  
      getStati() {
        if (this.stati) return this.stati;
        return this.http.get&lt;ApiResponse&gt;(this.apiUrl + 'lists/stati')
          .pipe(
            retry(3),
            map(data =&gt; {
              if (data.status === 0)
                this.stati = data.response; // &lt;-- this is an array
              return this.stati;
            }
        ));
      }
  </code></pre>
  
  <p><strong>request.component.ts</strong>  </p>
  
  <pre><code>this.svcApi.getStati()
    .subscribe((stati) =&gt; {
      this.stati = stati;
      this.request.nascita.stato = 'IT';
      this.request.residenza.stato = 'IT';
    });
  </code></pre>
  
  <p><strong>request.component.html</strong>  </p>
  
  <pre><code>&lt;select class="form-control"
          [(ngModel)]="request.nascita.stato" name="stato"&gt;
    &lt;option *ngFor="let stato of stati" 
        [value]="stato.codice"&gt;{{stato.nome | uppercase}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This works <strong>ONLY</strong> the first time, but when my router (re)activates the route I get an error in component stating that <code>svcApi.getStati().subscribe</code> is not a function; naturally I understand this because this time I don't return an Observable but an array instead!</p>
  
  <p><strong>SECOND ATTEMPT</strong><br>
  So I tried to change service function:<br>
  <code>if (this.stati) return Observable.from(this.stati);</code>  </p>
  
  <p>But when I come back to the route I get this error in console:</p>
  
  <blockquote>
    <p>ERROR Error: Cannot find a differ supporting object '[object Object]'
    of type 'object'. NgFor only supports binding to Iterables such as
    Arrays.</p>
  </blockquote>
  
  <p><strong>THIRD ATTEMPT</strong><br>
  My last attempt was to also change </p>
  
  <pre><code>&lt;option *ngFor="let stato of stati | async"
  </code></pre>
  
  <p>but I get this error</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'dispose' of null at
    AsyncPipe.push</p>
  </blockquote>
  
  <p>I'm pretty sure a simple solution should exist, but being a novice I can't think of it.</p>