Invalid Argument: Cannot use an empty value with the AsyncPipe at invalidArgumentError

Question

Invalid Argument: Cannot use an empty value with the AsyncPipe at invalidArgumentError

I'm facing an issue with extracting a string value from the Observable using the pipe and map operators. Despite my efforts, I always end up with an empty string as the result. I'm hoping that someone can assist me in understanding the cause of this problem.

Here is the http service method that retrieves a file from the backend:

getFiles(url: string, idProject: number, docProject: string): Observable<any> { 
return this.http.get(`${this.hostUrl}${url}/${idProject}/${docProject}`); 
  }

My call to the getFiles(...) method looks like this:

  showFile = false;
  fileUploads: Observable<string[]>;
.
.
.
showFiles(enable: boolean) {
    this.showFile = enable;

    if (enable) {
this.uploadService.getFiles('/projets', this.service.getProjet().idProjet,
  'documentProjets/pv/'//+ td.nomTypeDoc +'/getallfiles')
            .pipe( 
                  map( response => {
                  return response.slice(
                         response.indexOf("files"), 
                         response.lastIndexOf("?"))
                         })).subscribe(
                           (data) => {
                            this.fileUploads=data
                            console.log(data)},
                           (error) => console.log(error));
}
}

The original result before applying the map function is:

http://localhost:8080/api/v1/pv/files/file1.jpg?projetId=563, http://localhost:8080/api/v1/pv/files/file2.jpg?projetId=563

However, after using the map function, the result is an empty array.

Below is the corresponding HTML:

<button class="button btn-info" *ngIf='showFile' (click)='showFiles(false)'>Hide Files</button>

<button class="button btn-info" *ngIf='!showFile' (click)='showFiles(true)'>Show Files</button> 


<div [hidden]="!showFile">
  <div class="panel panel-primary">
    <div class="panel-heading">Liste des fichiers</div>

    <div *ngFor="let file of fileUploads | async">  
      <div class="panel-body">
        <app-details-upload [fileUpload]='file'></app-details-upload>
      </div>
    </div>
  </div>
</div>

I'm puzzled about why I am getting an empty value and this is the error message from my console:

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)

Any help on this matter would be greatly appreciated. Thank you.

angular typescript

Answer 1

Answer №1

When using the async pipe, it automatically subscribes to an Observable in the template and handles the unsubscription on component destruction. It's recommended to follow the convention of adding a $ sign at the end of observable stream variables.

For example:

<div *ngFor="let v of values$ | async">
  {{v}}
</div>

is the same as:

<div *ngFor="let v of values">
  {{v}}
</div>

In your TypeScript file, you can achieve the same result by subscribing manually:

this.values$.subscribe(values => this.values = values)

In your code snippet, you have the option to either remove the async pipe from the template or remove the subscription and assign the stream directly.

this.fileUploads$ = this.uploadService.getFiles('/projets', this.service.getProjet().idProjet,
  'documentProjets/pv/'//+ td.nomTypeDoc +'/getallfiles')
            .pipe( map( response => {
                  return response.slice(
                         response.indexOf("files"), 
                         response.lastIndexOf("?"))
                         }))

If you require logging for debugging purposes, consider using the tap RxJS pipeable operator.

Update - steps after debugging

The tap operator is used for side effects like logging and does not modify the stream. It helps you understand the data being passed to the next operator in the pipe, which in this case is an array of strings. Adjust your code accordingly:

this.fileUploads$ = this.yourService.pipe(
    // tap(console.log),
    map((responseUrls: string[]) => {
        return responseUrls.map((url: string) => {
           // perform operations on the string here
           // e.g. using string methods or regex
           return url.slice(
               url.indexOf(‘files’),
               url.indexOf(‘?’)
           )
        })
    })
    // }),
    // tap(console.log)
)

Answer 2

When using the async pipe, it automatically subscribes to an Observable in the template and handles the unsubscription on component destruction. It's recommended to follow the convention of adding a $ sign at the end of observable stream variables.

For example:

<div *ngFor="let v of values$ | async">
  {{v}}
</div>

is the same as:

<div *ngFor="let v of values">
  {{v}}
</div>

In your TypeScript file, you can achieve the same result by subscribing manually:

this.values$.subscribe(values => this.values = values)

In your code snippet, you have the option to either remove the async pipe from the template or remove the subscription and assign the stream directly.

this.fileUploads$ = this.uploadService.getFiles('/projets', this.service.getProjet().idProjet,
  'documentProjets/pv/'//+ td.nomTypeDoc +'/getallfiles')
            .pipe( map( response => {
                  return response.slice(
                         response.indexOf("files"), 
                         response.lastIndexOf("?"))
                         }))

If you require logging for debugging purposes, consider using the tap RxJS pipeable operator.

Update - steps after debugging

The tap operator is used for side effects like logging and does not modify the stream. It helps you understand the data being passed to the next operator in the pipe, which in this case is an array of strings. Adjust your code accordingly:

this.fileUploads$ = this.yourService.pipe(
    // tap(console.log),
    map((responseUrls: string[]) => {
        return responseUrls.map((url: string) => {
           // perform operations on the string here
           // e.g. using string methods or regex
           return url.slice(
               url.indexOf(‘files’),
               url.indexOf(‘?’)
           )
        })
    })
    // }),
    // tap(console.log)
)

Invalid Argument: Cannot use an empty value with the AsyncPipe at invalidArgumentError

Answer №1

Update - steps after debugging

Similar questions

Is it possible to trigger this Angular function upon page load?

Monitor the change in values upon pressing the submit button on Angular

Refreshing Angular2 View After Form Submission

Cannot trigger event ascn.onchange does not exist as a function

Deactivating PrimeNG checkbox

Implementing ngFor to Iterate Through a JSON Object in Angular 6

What are some ways to customize formControlNames in Angular reactive forms?

Is it possible for me to define TypeScript interfaces to be used in vanilla JavaScript projects within VSCode?

Enhance your TypeScript code using decorators with inheritance

Troubleshooting issue with Vue Class Component and Vuex-class causing ESLint error

Utilizing material-ui with Autocomplete featuring various value and option types

Error in JavaScript: A surprise anonymous System.register call occurred

Ways to mock a static method within an abstract class in TypeScript

Retrieving routing information from directives within angular2

Testing the derived class resulted in failure with the error message: "Unable to resolve all parameters for : (?, ?) in Angular 5."

Tips for integrating Typescript Definition files with Visual Studio 2017

Utilizing a nested interface in Typescript allows for creating more complex and

Types of navigation items based on conditions

Sharing the input value with a service in Angular 4

What is the best way to conduct tests on this React component using Jest?