Angular: 类型 'Observable<boolean>' 没有兼容的调用签名
Angular: Type 'Observable<boolean>' has no compatible call signatures
我仍在学习 angular,我想使用布尔可观察对象创建服务,并订阅该可观察对象。
我遵循这个 tutorial 因为我真正想要的是在用户未登录时隐藏菜单导航链接,本教程几乎相同。
所以在我的登录服务中:
export class LoginService {
private loggedIn = new BehaviorSubject<boolean>(false);
get isLoggedIn() {
console.log(this.loggedIn);
return this.loggedIn.asObservable();
}
constructor(
public http: Http,
public utilsService: UtilsService) { }
public login(credentials: Credentials): Observable<Response> {
// login code
// if user succeed login then:
this.loggedIn.next(true);
}
public logout(): Observable<Response> {
// logout code
// if user succeed logout then:
this.loggedIn.next(false);
}
}
在我的组件中我使用了这个函数
public isLoggedIn: boolean;
userIsLoggedIn() {
this._login.isLoggedIn().subscribe(
((res: boolean) => {
console.log(res);
this.isLoggedIn = res;
})
);
} // <- this is (36,5) position returned from error log
如果一切正常,那么在组件模板的导航链接中使用简单的 *ngIf="isLoggedIn"
应该可以。但是出了点问题,我在尝试编译时遇到了下一个错误。
ERROR in /project-folder/src/app/shared/navbar/navbar.ts (36,5): Cannot invoke an expression whose type lacks a call signature. Type 'Observable' has no compatible call signatures.
不知道出了什么问题。但是作为一个新手,我需要说的是,我不是很清楚 BehaviorSubject 是什么,也没有找到关于它的良好且易于理解的文档。
这应该很容易,但在尝试了几天没有成功之后,我几乎要放弃为未登录用户隐藏链接。
编辑: 我添加了 package.json 的一部分以显示使用的版本:
"devDependencies": {
"@angular/cli": "1.4.5",
"@angular/compiler-cli": "4.4.4",
"@angular/language-service": "4.4.4",
"@types/node": "6.0.60",
"codelyzer": "3.2.0",
// some of the dependencies omitted
"gulp": "3.9.1",
"gulp-coveralls": "0.1.4",
"typescript": "2.3.3"
}
您将 isLoggedIn 定义为 属性 并使用 getter:
get isLoggedIn() {
console.log(this.loggedIn);
return this.loggedIn.asObservable();
}
但随后您将其称为 函数:
this._login.isLoggedIn().subscribe(
((res: boolean) => {
console.log(res);
this.isLoggedIn = res;
})
);
您需要以 属性:
的形式访问它
this._login.isLoggedIn.subscribe( // No () here
((res: boolean) => {
console.log(res);
this.isLoggedIn = res;
})
);
我仍在学习 angular,我想使用布尔可观察对象创建服务,并订阅该可观察对象。
我遵循这个 tutorial 因为我真正想要的是在用户未登录时隐藏菜单导航链接,本教程几乎相同。
所以在我的登录服务中:
export class LoginService {
private loggedIn = new BehaviorSubject<boolean>(false);
get isLoggedIn() {
console.log(this.loggedIn);
return this.loggedIn.asObservable();
}
constructor(
public http: Http,
public utilsService: UtilsService) { }
public login(credentials: Credentials): Observable<Response> {
// login code
// if user succeed login then:
this.loggedIn.next(true);
}
public logout(): Observable<Response> {
// logout code
// if user succeed logout then:
this.loggedIn.next(false);
}
}
在我的组件中我使用了这个函数
public isLoggedIn: boolean;
userIsLoggedIn() {
this._login.isLoggedIn().subscribe(
((res: boolean) => {
console.log(res);
this.isLoggedIn = res;
})
);
} // <- this is (36,5) position returned from error log
如果一切正常,那么在组件模板的导航链接中使用简单的 *ngIf="isLoggedIn"
应该可以。但是出了点问题,我在尝试编译时遇到了下一个错误。
ERROR in /project-folder/src/app/shared/navbar/navbar.ts (36,5): Cannot invoke an expression whose type lacks a call signature. Type 'Observable' has no compatible call signatures.
不知道出了什么问题。但是作为一个新手,我需要说的是,我不是很清楚 BehaviorSubject 是什么,也没有找到关于它的良好且易于理解的文档。
这应该很容易,但在尝试了几天没有成功之后,我几乎要放弃为未登录用户隐藏链接。
编辑: 我添加了 package.json 的一部分以显示使用的版本:
"devDependencies": {
"@angular/cli": "1.4.5",
"@angular/compiler-cli": "4.4.4",
"@angular/language-service": "4.4.4",
"@types/node": "6.0.60",
"codelyzer": "3.2.0",
// some of the dependencies omitted
"gulp": "3.9.1",
"gulp-coveralls": "0.1.4",
"typescript": "2.3.3"
}
您将 isLoggedIn 定义为 属性 并使用 getter:
get isLoggedIn() {
console.log(this.loggedIn);
return this.loggedIn.asObservable();
}
但随后您将其称为 函数:
this._login.isLoggedIn().subscribe(
((res: boolean) => {
console.log(res);
this.isLoggedIn = res;
})
);
您需要以 属性:
的形式访问它 this._login.isLoggedIn.subscribe( // No () here
((res: boolean) => {
console.log(res);
this.isLoggedIn = res;
})
);