無法讀取屬性'取消訂閱'未定義的Angular4

我的項目有問題。我一直在與Firebase苦苦掙扎。現在我想創建一個用戶配置文件組件，併爲此我想獲取當前用戶登錄的信息。事情是，我不斷收到此錯誤：「無法讀取未定義的Angular4的屬性」退訂「什麼錯了代碼？？謝謝你的幫助。無法讀取屬性'取消訂閱'未定義的Angular4

import {Component, OnInit, ViewChild} from '@angular/core'; 
import {UserService} from "../pages/users/user.service"; 
import {User} from "../pages/users/user"; 
import {Profile} from "../pages/users/profile"; 
import {AuthService} from "../pages/login/auth.service"; 
import {MdSnackBar} from "@angular/material"; 
import {Observable, Subscription} from "rxjs"; 

@Component({ 
    selector: 'app-userprofile', 
    templateUrl: './userprofile.component.html', 
    styleUrls: ['./userprofile.component.scss'] 
}) 
export class UserprofileComponent implements OnInit { 

    initialProfile: Profile; 
    user: User; 

    error: string; 

    constructor(private userService: UserService, 
    private auth: AuthService, 
    public updateValidationBar: MdSnackBar) { } 

    ngOnInit() { 
    let sub = this.auth.currentUser().subscribe(user => { 
     this.user = user; 
     this.cloneInitial(this.user.profile); 
     sub.unsubscribe(); 
    }); 
    this.user = new User(); 
    this.user.profile = new Profile(); 
    this.cloneInitial(this.user.profile); 
    } 

    cloneInitial(profile : Profile){ 
    this.initialProfile = Object.assign(new Profile(), profile); 
    } 

    onSubmit(userProfileForm){ 
    if(userProfileForm.form.valid){ 
     let sub = this.userService.updateUserProfile(this.user) 
     .subscribe(user => { 
      this.updateValidationBar.open("Your profile is update", "Ok", { 
      duration: 3000 
      }); 
      this.cloneInitial(user.profile); 
     }, 
     err => { 
      this.error = err.message; 
     }, 
     () => { 
      sub.unsubscribe(); 
     }); 
    } 
    } 

    profileIsChanged(){ 
    return this.user.profile.displayName !== this.initialProfile.displayName 
     || this.user.profile.username !== this.initialProfile.username 
     || this.user.profile.email !== this.initialProfile.email; 
    } 
}

HTML

<form (ngSubmit)="onSubmit(userProfileForm)" 
     #userProfileForm="ngForm" 
     fxFlexFill [fxLayout]="'row'" 
     fxLayoutAlign="center start"> 
    <md-card> 
    <md-card-content [fxLayout]="'column'" fxFlex="400px"> 
     <h3> Update User profile</h3> 
     <p [ngStyle]="{'color': 'red', 'font-size':'75%'}" 
     align="start"> 
     {{error}} 
     </p> 
     <md-input-container > 
     <input mdInput 
       fxFlex="100" 
       required 
       minlength="3" 
       placeholder="Username" 
       [(ngModel)]="user.profile.username" 
       name="username" 
       #username="ngModel"> 
     <md-hint 
      *ngIf="!username.pristine && username.errors?.required" 
      [ngStyle]="{'color': 'red'}" 
      align="start"> 
      Username required 
     </md-hint> 
     <md-hint 
      *ngIf="!username.pristine && username.errors?.minlength" 
      [ngStyle]="{'color': 'red'}" 
      align="start"> 
      Username to short (min. 3 characters) 
     </md-hint> 
     </md-input-container> 
     <md-input-container > 
     <input mdInput 
       fxFlex="100" 
       minlength="3" 
       placeholder="Display Name" 
       [(ngModel)]="user.profile.displayName" 
       name="displayName" 
       #displayName="ngModel"> 
     </md-input-container> 
    </md-card-content> 
    <md-card-actions fxLayoutAlign="end" [fxLayout]="'row'"> 
     <button type="submit" 
       md-icon-button 
       [disabled]="!userProfileForm.form.valid || !profileIsChanged()"> 
     </button> 
    </md-card-actions> 
    </md-card> 
</form>

來源

2017-04-12 Claudio Ramírez Guichard

http://stackoverflow.com/questions/38008334/angular2-rxjs-when-should-i-unsubscribe-from-subscription –