未定義のプロパティ 'unsubscribe'を読み取ることができませんAngular4

Question

私のプロジェクトに問題があります。私はしばらくの間、Firebaseと闘ってきました。今、私はユーザープロファイルコンポーネントを作成したいと思うので、ログインしている現在のユーザーの情報を取得したいのですが、このエラーが発生し続けます： "Undefined Angular4のプロパティ 'unsubscribe'を読み取ることができません コード？？ご協力いただきありがとうございます。

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> 

Answer 1

購読ながら、subscriptionサブに到達することはできませんのでごunsubscribeタイミングは、間違っています。

あなたはこの方法を試すことができます。

• あなたが新しいのconst変数としてサブを定義する必要がありますngOnDestroy()

Answer 2

でsub.unsubscribe();を行う

コンポーネントであなたのsubscriptionを保ちます。 次に、登録を解除してください。 私は仕事をします。