首页 文章

Angular 5订阅不是一个功能

提问于
浏览
1

Angular返回错误:错误:未捕获(在promise中):TypeError:res.users.subscribe不是函数 .

从今天早上起,我不明白我的决心是什么错 .

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;
           });
        });
    }
}

当我记录res.users时,它返回"function UsersResolve()"而没有 proto 订阅...

json是Object of Object,如:

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

问题可能来自我的json的内容吗?

最初,我想训练RxJS操作员......

3 回答

  • 2

    您可以通过两种方式访问已解析的数据

    ActivatedRoute data 包含当前路径的静态和已解析数据的属性
    ActivatedRouteSnapshot:无法观察的替代方案 .

    您需要将 resolve 属性添加到路径配置,该配置是每个键指向解析程序的对象 .

    const appRoutes: Routes = [{ path: 'users', component: UsersComponent, 
             data: { title : 'Liste des Utilisateurs'},
              resolve:{ users : UsersResolve } } 
    ]
    

    方法1

    ngOnInit() {
            this.route.data.subscribe(value=>{
    
       this.title=value.title;
        this.users=value.user;
    });
    
        }
    

    做法:2

    ngOnInit() {
    
           this.title=this.route.snapshot.data.title;
            this.users=this.route.data.snapshot.user;
    
    
            }
    

    STACKBLITZ DEMO

  • 0

    您正在对Array应用subscribe . 你应该在Observable上做 .

    尝试应用以下更改 . 一旦您了解数据在控制台上的 Value ,您就可以对数据执行操作 .

    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

    如评论中所述:

    如果你已经定义了这样的路线:

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

    您应该能够获得以下数据:

    ngOnInit() {
            this.route.data.subscribe(data => console.log(data['users']));
        }
    
  • 1

    来自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
    }
    

    这些数据本身就是可观察的 . 尝试:

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

    请记住,订阅是听到可观察声音的耳朵 .

相关问题