<分区>
您好，我正在通过观看教程开发一个 Angular 8 应用程序，在我的 header 组件中，我想要当前登录用户的电子邮件 ID。我的 auth.service.ts 如下所示:
import { Injectable } from "@angular/core";
import { AngularFireAuth } from "@angular/fire/auth";
@Injectable({
providedIn: "root",
})
export class AuthService {
constructor(private auth: AngularFireAuth) {}
signUp(email: string, password: string) {
return this.auth.auth.createUserWithEmailAndPassword(email, password);
}
signIn(email: string, password: string) {
return this.auth.auth.signInWithEmailAndPassword(email, password);
}
getUser() {
return this.auth.authState;
}
signOut() {
return this.auth.auth.signOut();
}
}
我的 header.component.ts 是:
import { Component, OnInit } from "@angular/core";
import { AuthService } from "src/app/services/auth.service";
import { ToastrService } from "ngx-toastr";
import { Router } from "@angular/router";
@Component({
selector: "app-header",
templateUrl: "./header.component.html",
styleUrls: ["./header.component.css"],
})
export class HeaderComponent implements OnInit {
email:string = null;
constructor(
private auth: AuthService,
private router: Router,
private toastr: ToastrService
) {
auth.getUser().subscribe((user)=>{
console.log("User is:",user);
this.email = user?.email;
})
}
ngOnInit() {}
async handSignOut(){
try {
await this.auth.signOut();
this.router.navigateByUrl("/signin");
this.toastr.info("Logout sucess");
this.email = null;
} catch (error) {
this.toastr.error("Problem in Signout");
}
}
}
当我编译它显示的代码时:
ERROR in src/app/layout/header/header.component.ts:20:25 - error TS1109: Expression expected.
20 this.email = user?.email;
~
src/app/layout/header/header.component.ts:20:31 - error TS1005: ':' expected.
20 this.email = user?.email;
~
当我删除“？”行内:this.email = user?.email;它编译成功。我该如何解决这个问题？
我的 package.json :
{
"name": "travelgram",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~8.2.7",
"@angular/common": "~8.2.7",
"@angular/compiler": "~8.2.7",
"@angular/core": "~8.2.7",
"@angular/fire": "^5.4.2",
"@angular/forms": "~8.2.7",
"@angular/platform-browser": "~8.2.7",
"@angular/platform-browser-dynamic": "~8.2.7",
"@angular/router": "~8.2.7",
"@fortawesome/angular-fontawesome": "^0.6.1",
"@fortawesome/fontawesome-svg-core": "^1.2.29",
"bootstrap": "^4.5.0",
"browser-image-resizer": "^2.1.0",
"firebase": "^7.15.4",
"ngx-toastr": "^10.1.0",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"uuid": "^8.2.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.803.5",
"@angular/cli": "~8.3.5",
"@angular/compiler-cli": "~8.2.7",
"@angular/language-service": "~8.2.7",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3",
"@angular-devkit/architect": "<0.900 || ^0.900.0-0 || ^9.0.0-0",
"firebase-tools": "^7.12.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1"
}
}