typescript - Compilarea aplicației Angular 8 afișează: "eroare TS1005: se așteaptă ':' "

Bună, dezvolt o aplicație Angular 8 urmărind un tutorial. În componenta mea de antet vreau ID-ul de email al utilizatorului care este momentan autentificat. Serviciul meu auth.service.ts este prezentat mai jos:

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

și fișierul meu header.component.ts este :

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

Când compilez codul, apare:

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;
                                 ~

Când elimin „?” în linia: this.email=user?.email; se compilează cu succes. Cum pot rezolva această problemă?

Fișierul meu 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"
  }
}

Răspuns #1

Încearcă asta

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

sau

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

sau

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

Răspunsul #2

Din câte înțeleg utilizarea expresiei ".?", aceasta verifică doar dacă valoarea "user" este null sau undefined. Dacă este, va returna undefined. Așadar, presupun că utilizarea acestei expresii în cazul tău ar putea fi redundantă. Dacă valoarea user ar trebui să fie într-adevăr null sau undefined, vei obține undefined indiferent de expresia ".?".

Poate că acest lucru vă poate oferi informații suplimentare: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining