data: unknown Object is of type 'unknown'.ts in pipe and map functions in angular

user_10115912 0
Viewed 435

I am trying to return some data in pipe and map operators in angular but getting this error: (parameter) data: unknown Object is of type 'unknown'.ts(2571)

I am using angular 12+ version.

I was trying to get the data modified as "Round: 0", "Round: 1" etc. instead of 1, 2 etc. on the console

here is my code in the home.component.ts file

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Subscription } from 'rxjs';
import { interval } from 'rxjs';
import { filter } from 'rxjs/operators';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, OnDestroy {

  private counterSubsciption!: Subscription;
  constructor() { }

  ngOnInit() {
    // this.counterSubsciption = interval(1000).subscribe(count => {
    //   console.log(count);
    // })

    const firstObservable = new Observable(observer => {
      let count = 0;
      setInterval(() => {
        observer.next(count);
        if(count===2){
          observer.complete();
        }
        if(count>3){
          observer.error("Count is greater than 3!");
        }
        count++;
      },1000)
    });


    this.counterSubsciption = firstObservable.pipe(filter((data) =>{
      return data > 0;
    }),map((data) => {
      return data;
    })).subscribe((data) => {
      console.log(data);
    }, error => {
      console.log(error);
      alert(error); 
    }, () => {
      console.log('Completed!')
    }
    
    )

  }

  ngOnDestroy() {
    this.counterSubsciption.unsubscribe();
  }

}
subscribe observable rxjs angular
1 Answers

Read about Rxjs operators from https://www.learnrxjs.io/learn-rxjs/operators/creation/interval

Instead of wrapping setInterval with new Observable,you can use RxJs interval operator.

const firstObservable = interval(1000)
    .pipe(
        tap((data) => {
            if (data > 3) {
                throw 'Count is greater than 3!';
            }
        }),
        map((data) => {
            return 'Round' + data;
        })
    );

firstObservable.subscribe({
    next: (data) => console.log(data),
    error: (err) => console.error(err),
});
user_105571790
Related