Angular 8应用程序编译显示：“错误TS1005：'：'预期” [重复]

Posted 2023-03-13

【中文标题】Angular 8应用程序编译显示：“错误TS1005：\'：\'预期” [重复]

【英文标题】：Angular 8 app compilation shows : "error TS1005: ':' expected " [duplicate]Angular 8应用程序编译显示：“错误TS1005：'：'预期” [重复]

【发布时间】：2020-10-15 06:12:48

【问题描述】：

您好，我正在通过观看教程开发一个 Angular 8 应用程序，在我的标题组件中，我想要当前登录的用户的电子邮件 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"
  

【问题讨论】：

您需要 TypeScript 3.7 才能使用此语法，但您只有 3.5。尝试升级您的 TypeScript 版本。

@SiddharthS 是的，非常感谢。

@CyrilGandon 非常感谢您的更新，我不知道版本要求

【参考方案1】：

据我了解“.?”的用法表达式，它只检查“用户”值是否为空或未定义。如果是，它将返回未定义。所以我想在你的情况下使用这个表达式可能是多余的。如果用户值确实应该为 null 或未定义，那么您将独立于“.？”而得到未定义。表达。

也许这可以为您提供更多信息： https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining

【讨论】：

谢谢你，链接有帮助。

【参考方案2】：

试试这个

this.email = user ? user.email ? user.email :"Email Null" : "User Null";

或

if(user != null && user!= undefined)

  if(user.email != null && user.email != undefined)
   
    this.email = user.email;
   

或

if( (user != null && user!= undefined) && (user.email != null && user.email != undefined))

    this.email = user.email;