Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5 Subscribe not a function

Angular return a error : Error: Uncaught (in promise): TypeError: res.users.subscribe is not a function.

Since this morning, I don't understand what's wrong in my resolve.

UserService.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class UsersService {

    private api = 'http://localhost:3000/users';
    private headers = new HttpHeaders();

    constructor(
        private http: HttpClient
    ) {}

     getAllUsers(): Observable<any[]> {
         return this.http.get<any[]>(this.api, {headers: this.headers, responseType: 'json' });
    }
}

UserResolve.ts:

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { UsersService } from '../services/users.service';

@Injectable()
export class UsersResolve implements Resolve<any> {

    constructor(private usersService: UsersService) {}

    resolve() {
       return this.usersService.getAllUsers();
    }
}

UserComponent.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

import {Users} from '../_shared/models/Users';

@Component({
  selector: 'app-user',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.sass']
})

export class UsersComponent implements OnInit {

    constructor(private route: ActivatedRoute) {}

    public title: string;
    public users: Users[] = [];

    ngOnInit() {
        this.route.data.forEach((res: any): any => {
           this.title = res.title;
           res.users.subscribe(users =>  {
              console.log(users);
              this.users = users;
           });
        });
    }
}

When I log res.users, it return "function UsersResolve()" with not proto subscribe...

The json is Array of Object like :

{
  id: 13246,
  guid: '46ffgd456dfs',
  name: 'John Doe',
  adress: ...
}

Can the problem come from the contents of my json ?

Originally, I wanted to train on the RxJS operator...

like image 635
Reuno92 Avatar asked Sep 01 '25 21:09

Reuno92


2 Answers

You're applying subscribe on Array. You should do it on Observable.

Try to apply below changes.. You can perform operations on data once you understand it's value on console.

UserComponent.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import {Users} from '../_shared/models/Users';

@Component({
  selector: 'app-user',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.sass']
})

export class UsersComponent implements OnInit {

    constructor(private route: ActivatedRoute) {}

    public title: string;
    public users: Users[] = [];

    ngOnInit() {
        this.route.data.subscribe(data => console.log(data));
    }
}

UPDATE

As mentioned in Comments:

if you've defined routes like this:

const appRoutes: Routes = 
[ ... 
 { path: 'users',
   component: UsersComponent,
   resolve: { 
     users : UsersResolve 
   } 
 } 
];

The you should be able to get the data as:

ngOnInit() {
        this.route.data.subscribe(data => console.log(data['users']));
    }
like image 79
Pavankumar Shukla Avatar answered Sep 03 '25 10:09

Pavankumar Shukla


From de angular.io doc:

interface ActivatedRoute {
  snapshot: ActivatedRouteSnapshot
  url: Observable<UrlSegment[]>
  params: Observable<Params>
  queryParams: Observable<Params>
  fragment: Observable<string>
  data: Observable<Data>
  outlet: string
  component: Type<any> | string | null
  get routeConfig: Route | null
  get root: ActivatedRoute
  get parent: ActivatedRoute | null
  get firstChild: ActivatedRoute | null
  get children: ActivatedRoute[]
  get pathFromRoot: ActivatedRoute[]
  get paramMap: Observable<ParamMap>
  get queryParamMap: Observable<ParamMap>
  toString(): string
}

That data is the observable himself. Try:

this.route.data.subscribe(data =>  {
      console.log(data);
   });
});

Remember, subscribe is the ear to an observable voice.

like image 23
Noel Santos Avatar answered Sep 03 '25 09:09

Noel Santos