Angular 5 订阅不是函数
Angular 5 Subscribe not a function
Angular return 错误:错误:未捕获(承诺):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 时,它 return "function UsersResolve()" 没有 proto 订阅...
json 是对象数组,如:
{
id: 13246,
guid: '46ffgd456dfs',
name: 'John Doe',
adress: ...
}
问题能出在我的json内容上吗?
本来想训练RxJS算子...
您正在申请订阅 Array。你应该在 Observable 上做。
尝试应用以下更改..
一旦您了解数据在控制台上的价值,您就可以对数据执行操作。
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));
}
}
更新
如评论所述:
如果您定义了这样的路由:
const appRoutes: Routes =
[ ...
{ path: 'users',
component: UsersComponent,
resolve: {
users : UsersResolve
}
}
];
你应该能够得到如下数据:
ngOnInit() {
this.route.data.subscribe(data => console.log(data['users']));
}
来自 angular.io 文档:
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);
});
});
记住,订阅是对可观察声音的倾听。
您可以通过两种方式访问已解析的数据
ActivatedRoute
data
属性保存当前路由的静态和解析数据
ActivatedRouteSnapshot
:不可观察的替代方案。
你需要在路由配置中添加resolve
属性,这是一个对象,每个key指向一个解析器。
const appRoutes: Routes = [{ path: 'users', component: UsersComponent,
data: { title : 'Liste des Utilisateurs'},
resolve:{ users : UsersResolve } }
]
方法一
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;
}
上面的回答都对,但是我运行变成了这个的特例。
被调用的方法是一个 observable 并在应用程序的其他部分作为 observable 使用,但是当我 运行 它时,它说的是可怕的 subscribe is not a function
.
问题是,我在 Jasmine 单元测试中 运行,我定义了一个自定义模拟,而该模拟不是 return 可观察对象。在这种情况下,很容易搞砸模拟和 return 一个不同的类型然后被模拟的实际函数 returns。更正我的模拟解决了我的问题。
Angular return 错误:错误:未捕获(承诺):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 时,它 return "function UsersResolve()" 没有 proto 订阅...
json 是对象数组,如:
{
id: 13246,
guid: '46ffgd456dfs',
name: 'John Doe',
adress: ...
}
问题能出在我的json内容上吗?
本来想训练RxJS算子...
您正在申请订阅 Array。你应该在 Observable 上做。
尝试应用以下更改.. 一旦您了解数据在控制台上的价值,您就可以对数据执行操作。
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));
}
}
更新
如评论所述:
如果您定义了这样的路由:
const appRoutes: Routes =
[ ...
{ path: 'users',
component: UsersComponent,
resolve: {
users : UsersResolve
}
}
];
你应该能够得到如下数据:
ngOnInit() {
this.route.data.subscribe(data => console.log(data['users']));
}
来自 angular.io 文档:
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);
});
});
记住,订阅是对可观察声音的倾听。
您可以通过两种方式访问已解析的数据
ActivatedRoute
data
属性保存当前路由的静态和解析数据
ActivatedRouteSnapshot
:不可观察的替代方案。
你需要在路由配置中添加resolve
属性,这是一个对象,每个key指向一个解析器。
const appRoutes: Routes = [{ path: 'users', component: UsersComponent,
data: { title : 'Liste des Utilisateurs'},
resolve:{ users : UsersResolve } }
]
方法一
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;
}
上面的回答都对,但是我运行变成了这个的特例。
被调用的方法是一个 observable 并在应用程序的其他部分作为 observable 使用,但是当我 运行 它时,它说的是可怕的 subscribe is not a function
.
问题是,我在 Jasmine 单元测试中 运行,我定义了一个自定义模拟,而该模拟不是 return 可观察对象。在这种情况下,很容易搞砸模拟和 return 一个不同的类型然后被模拟的实际函数 returns。更正我的模拟解决了我的问题。