无法读取属性'取消订阅'未定义的Angular4

Question

我的项目有问题。我一直在与Firebase苦苦挣扎。现在我想创建一个用户配置文件组件，并为此我想获取当前用户登录的信息。事情是，我不断收到此错误：“无法读取未定义的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> 

Answer 1

您unsubscribe时机是错误的，因为在订阅时，subscription子无法达成。

你可以试试这个方法：

• 让您subscription在组件
• 在ngOnDestroy()

Answer 2

做sub.unsubscribe();你应该定义子作为新的常量变量。 然后尝试取消订阅。 我会工作。