我的项目有问题。我一直在与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
<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>
答案 0 :(得分:1)
您的unsubscribe
时间安排错误,因为在订阅时,无法联系到subscription
子。
你可以这样试试:
subscription
保留在您的组件中sub.unsubscribe();
ngOnDestroy()
答案 1 :(得分:0)
您应该将sub定义为新的const变量。 然后尝试取消订阅。 我会工作的。
答案 2 :(得分:0)
退订应在“ OnDestroy”生命周期挂钩(angular docs)上执行。更具声明性的方式是使用“订阅”类,请参见下面的示例:
// 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);})
);