Angular 无法读取属性'；取消订阅'；未定义角度的定义4

我的项目有问题。我和Firebase斗争了一段时间。现在我想创建一个用户配置文件组件，为此我想获取当前登录用户的信息。问题是，我一直遇到这样的错误：“无法读取未定义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

更新用户配置文件

{{error}}

需要用户名
要缩短的用户名（至少3个字符）

您的

取消订阅

时机不对，因为在订阅时，无法访问

订阅

子

您可以这样尝试：

• 在组件中保留您的

  订阅

• 调用

  sub.unsubscribe（）在
  ngondestory（）中

---

您应该将sub定义为新的常量变量。 然后尝试取消订阅。

---

我会工作。

取消订阅应该在“OnDestroy”生命周期挂钩（）上执行。更具声明性的方式是使用“Subscription”类，请参见下面的示例：

// add property
private subscription: Subscription = new Subscription();

// implement OnDestroy life-cycle hook
ngOnDestroy() {
  this.subscription.unsubscribe();
}

// add when subscribing.
this.subscription.add(
      this.signinForm.valueChanges.subscribe(
        _ => { console.log('form value changed.');})
    );

// add one more
this.subscription.add(
      this.myService.getData.subscribe(
        data => { console.log(data);})
    );

// add property
private subscription: Subscription = new Subscription();

// implement OnDestroy life-cycle hook
ngOnDestroy() {
  this.subscription.unsubscribe();
}

// add when subscribing.
this.subscription.add(
      this.signinForm.valueChanges.subscribe(
        _ => { console.log('form value changed.');})
    );

// add one more
this.subscription.add(
      this.myService.getData.subscribe(
        data => { console.log(data);})
    );