title: InvalidPipeArgument: '' for pipe 'AsyncPipe' at invalidPipeArgumentError
body: <p>I'm trying to extract a string value from the Observable using the pipe and map, how ever I always got in the end an empty string. I hope that someone can help me to understand the reason behind this issue.</p>
  
  <p>I have an http service that get a file from the back-end:</p>
  
  <pre><code>getFiles(url: string, idProject: number, docProject: string): Observable&lt;any&gt; { 
  return this.http.get(`${this.hostUrl}${url}/${idProject}/${docProject}`); 
    }
  </code></pre>
  
  <p>I call the getFiles(...) like that:</p>
  
  <pre><code>  showFile = false;
    fileUploads: Observable&lt;string[]&gt;;
  .
  .
  .
  showFiles(enable: boolean) {
      this.showFile = enable;
  
      if (enable) {
  this.uploadService.getFiles('/projets', this.service.getProjet().idProjet,
    'documentProjets/pv/'//+ td.nomTypeDoc +'/getallfiles')
              .pipe( 
                    map( response =&gt; {
                    return response.slice(
                           response.indexOf("files"), 
                           response.lastIndexOf("?"))
                           })).subscribe(
                             (data) =&gt; {
                              this.fileUploads=data
                              console.log(data)},
                             (error) =&gt; console.log(error));
  }
  }
  </code></pre>
  
  <p>The result before the Map is:</p>
  
  <pre><code>http://localhost:8080/api/v1/pv/files/file1.jpg?projetId=563, http://localhost:8080/api/v1/pv/files/file2.jpg?projetId=563 
  </code></pre>
  
  <p>and after the MAp is: an empty array.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;button class="button btn-info" *ngIf='showFile' (click)='showFiles(false)'&gt;Hide Files&lt;/button&gt;
  
  &lt;button class="button btn-info" *ngIf='!showFile' (click)='showFiles(true)'&gt;Show Files&lt;/button&gt; 
  
  
  &lt;div [hidden]="!showFile"&gt;
    &lt;div class="panel panel-primary"&gt;
      &lt;div class="panel-heading"&gt;Liste des fichiers&lt;/div&gt;
  
      &lt;div *ngFor="let file of fileUploads | async"&gt;  
        &lt;div class="panel-body"&gt;
          &lt;app-details-upload [fileUpload]='file'&gt;&lt;/app-details-upload&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't know why I get as result an empty value ' ' and this is the error from my consol:</p>
  
  <blockquote>
    <p>ListUploadComponent.html:3 ERROR Error: InvalidPipeArgument: '' for
    pipe 'AsyncPipe'
        at invalidPipeArgumentError (common.js:3981)
        at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._selectStrategy
    (common.js:4590)
        at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe._subscribe
    (common.js:4580)
        at AsyncPipe.push../node_modules/@angular/common/fesm5/common.js.AsyncPipe.transform
    (common.js:4562)
        at Object.eval [as updateDirectives] (ListUploadComponent.html:10)
        at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)
        at checkAndUpdateView (core.js:10451)
        at callViewAction (core.js:10692)
        at execComponentViewsAction (core.js:10634)
        at checkAndUpdateView (core.js:10457)</p>
  </blockquote>
  
  <p>Thank you in advance.</p>