TypeError: Cannot read property 'username' of undefined
at Object.eval [as updateDirectives] (AppComponent.html:6)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:36055)
at checkAndUpdateView (core.js:35067)
at callViewAction (core.js:35433)
at execEmbeddedViewsAction (core.js:35390)
at checkAndUpdateView (core.js:35068)
at callViewAction (core.js:35433)
at execComponentViewsAction (core.js:35361)
at checkAndUpdateView (core.js:35074)
at callWithDebugContext (core.js:36407)
Мой код работал нормально .. Случайно я удалил пользователя, но пересоздал профиль .. так как тогда вышеупомянутая ошибка показывает, пытаясь войти в систему с пользователем .. Установлен компонент.ts..Can Мне нужна помощь?
app.component.ts
import {Component, OnInit} from '@angular/core';
import {UserService} from './user.service';
import {throwError} from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
public users: any;
/**
* An object representing the user for the login form
*/
public user: any;
constructor(public _userService: UserService) { }
ngOnInit() {
this.user = {
username: '',
password: ''
};
}
login() {
this._userService.login({'username': this.user.username, 'password': this.user.password});
}
refreshToken() {
this._userService.refreshToken();
}
logout() {
this._userService.logout();
}
getUsers() {
this.users = this._userService.getUsers();
}
}
Это шаблон .. Хотя я ничего не изменил в этом файле ..
app.component.html
<h2>Log In</h2>
<div class="row" *ngIf="!_userService.token">
<div class="col-sm-4">
<label>Username:</label><br />
<input type="text" name="login-username" [(ngModel)]="user.username">
<span *ngFor="let error of _userService.errors.username"><br/>{{ error }}</span></div>
<div class="col-sm-4">
<label>Password:</label><br />
<input type="password" name="login-password" [(ngModel)]="user.password">
<span *ngFor="let error of _userService.errors.password"><br/>{{ error }}</span>
</div>
<div class="col-sm-4">
<button (click)="login()" class="btn btn-primary">Log In</button>
</div>
<div class="col-sm-12">
<span *ngFor="let error of _userService.errors.non_field_errors">{{ error }}<br /></span>
</div>
</div>
<div class="row" *ngIf="_userService.token">
<div class="col-sm-12">You are logged in as {{ _userService.username }}.<br />
Token Expires: {{ _userService.token_expires }}<br />
<button (click)="refreshToken()" class="btn btn-primary">Refresh Token</button>
<button (click)="getUsers()" class="btn btn-primary">Get Users</button>
<button (click)="logout()" class="btn btn-primary">Log Out</button>
</div>
</div>
user.service.ts
import {Injectable} from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
@Injectable()
export class UserService {
// http options used for making API calls
private httpOptions: any;
// the actual JWT token
public token: string;
// the token expiration date
public token_expires: Date;
// the username of the logged in user
public username: string;
// user array
public userList: any = [];
// error messages received from the login attempt
public errors: any = [];
constructor(private http: HttpClient) {
this.httpOptions = {
headers: new HttpHeaders({'Content-Type': 'application/json'})
};
}
// Uses http.post() to get an auth token from djangorestframework-jwt endpoint
public login(user) {
this.http.post('/api-token-auth/', JSON.stringify(user), this.httpOptions).subscribe(
data => {
console.log('login success', data);
this.updateData(data['token']);
localStorage.setItem('token', data['token']);
},
err => {
this.errors = err['error'];
}
);
}
/**
* Refreshes the JWT token, to extend the time the user is logged in
*/
public refreshToken() {
this.http.post('/api-token-refresh/', JSON.stringify({token: this.token}), this.httpOptions).subscribe(
data => {
console.log('refresh success', data);
this.updateData(data['token']);
localStorage.setItem('token', data['token']);
},
err => {
console.error('refresh error', err);
this.errors = err['error'];
}
);
}
public getUsers() {
this.http.get('/api-users/', {
headers: new HttpHeaders({
'Content-type': 'application/json',
'Authorization': localStorage.getItem('token')
})
}).subscribe(
data => {
this.userList = data['token'];
},
err => {
console.error('authorization error', err);
this.errors = err['error'];
}
);
}
public logout() {
this.token = null;
this.token_expires = null;
this.username = null;
localStorage.removeItem('token');
}
private updateData(token) {
this.token = token;
this.errors = [];
// decode the token to read the username and expiration timestamp
const token_parts = this.token.split(/\./);
const token_decoded = JSON.parse(window.atob(token_parts[1]));
this.token_expires = new Date(token_decoded.exp * 1000);
this.username = token_decoded.username;
}
}