Steps to resolve the Angular observable error

Question

Steps to resolve the Angular observable error

I am trying to remove the currently logged-in user using a filter method, but I encountered an error:

Type 'Subscription' is missing the following properties from type 'Observable[]>': _isScalar, source, operator, lift, and 6 more.

Below is the code snippet causing the issue:

@Select(UserPageState.get('collection')) users$: Observable<Array<Partial<User>>>;
async ngOnInit() {
  const USER = this.creds.credentials['id'];
  this.users$.subscribe(param => param.filter(x => x.id !== USER));
  await this.store.dispatch(new UserPageList({ start: 1, length: this.pageSize })).toPromise();
}

HTML

<ag-grid-angular
      style="width: 100%; height: 100%;"
      [class]="(darkMode$ | async) ? 'ag-theme-balham-dark' : 'ag-theme-balham'"
      [gridOptions]="gridOptions"
      [rowData]="users$ | async"
      [columnDefs]="columnDefs"
      [frameworkComponents]="frameworkComponents"
      (gridReady)="onGridReady($event)"
      (firstDataRendered)="onFirstDataRendered($event)"
    >
    </ag-grid-angular>

javascript angular typescript

Answer 1

Answer №1

The problem lies in the following code snippet: when subscribing to an observable, it returns a Subscription instance, and then you are reassigning it back to the observable.

this.users$ = this.users$.subscribe(param => param.filter(x => x.id !== USER));

To fix this issue, simply avoid reassigning it to the observable again.

this.users$.subscribe(param => param.filter(x => x.id !== USER));

Answer 2

The problem lies in the following code snippet: when subscribing to an observable, it returns a Subscription instance, and then you are reassigning it back to the observable.

this.users$ = this.users$.subscribe(param => param.filter(x => x.id !== USER));

To fix this issue, simply avoid reassigning it to the observable again.

this.users$.subscribe(param => param.filter(x => x.id !== USER));

Steps to resolve the Angular observable error

Answer №1

Similar questions

Enhance your bootstrap accordion by incorporating stylish up and down arrows using the <accordion> element

Discovering the process of iterating through values from multiple arrays of objects and applying them to a new response in Angular 8

Ways to extract innerHTML content from a loaded element generated by using the .load() method

Establish communication between two Sails applications

Developing a music playlist using javascript/angular (replicating array elements while linking nested objects)

What is the best way to acquire an ID that is generated dynamically?

Executing animation after the completion of a transition

Create a graph that can retrieve and showcase information stored in a Rails database

Is it feasible to access reference images contained within a zip/tar file using html/javascript with the help of a library?

Leveraging fetch for sending JSON payloads

AngularJS ng-include nested form configuration

Observes the behavior of a React component with the context.router property being undefined

Can you explain the significance of the "@" symbol prefix found in npm package names?

What could be causing my data to appear as undefined or empty? I am using jQuery.post() to send data from JavaScript to PHP

When attempting to input data into the database, an error is displayed stating that /test.php cannot be POSTed

Please indicate the data type in Vue using Typescript

How to send parameters to Bootstrap modal using a hyperlink

Address properties that are undefined before they cause an error

What is the approach for utilizing Vue List Rendering with v-if to verify the presence of items within an array?

What is the best way to simulate a TypeScript enum in my Jest test suite?