我使用了Angular12文本插值，但未顯示用戶名

我在我的 Angular 代碼中沒有看到任何錯誤，但是當我使用開發人員工具時，由于文本插值錯誤，用戶名沒有出現。你知道答案嗎？

用戶帳戶.ts

eexport class Useraccount{
id:string ='';
username: string='';
name:string='';
password:string='';
email:string=''; 
 }

頭檔案.ts

user= this.authservice.useraccountValue;

constructor(private authservice:AuthService) {
//this.user
 this.authservice.user.subscribe(x => this.user = x);
  console.log(this.user);
 }

header.html

<ul class="info_ul">
<li>{{user.username}}</li>
<li><a (click)="logout($event)">logout</a></li>
</ul>

分配給 authservice.ts 和 BhaviorSubject 服務的 UseraccountSubject

export class AuthService {

 private useraccountSubject: 
 BehaviorSubject<Useraccount>;
 public user: Observable<Useraccount>;
 constructor(private http:HttpClient, private 
 router:Router){
 this.useraccountSubject = new 
 BehaviorSubject<Useraccount>(null as any);
  this.user = this.useraccountSubject.asObservable();

 if(sessionStorage.getItem("USER")){ 
  const user =sessionStorage.getItem("USER");
  if(user){
    this.useraccountSubject.next(JSON.parse(user));
  }
 }
}

 private handleError(err: HttpErrorResponse) {
   if (err.status === 200) {
   console.error('Error:',err.error.data)
   } else {
   console.error(`Backend error ${err.status}`)
   }
  return throwError('Try again')
  }
  private handleErrorsingup(err: HttpErrorResponse) {
   if (err.status === 201) {
  console.error('Error:',err.error.data)
   } else {
    alert('faild');
    console.error(`Backend error ${err.status}`)
   }
   return throwError('Try again.')
   }


  login(username:string,password:string){ 

    const params = new FormData();
    params.append('username', username);
    params.append('password', password);
    return this.http.post<any>(`${baseUrl}/signin/`, params, {observe:'response', 
    withCredentials: true})//withCredentials:true
   .pipe(map(user=>{
    catchError(this.handleError)
     sessionStorage.setItem("USER", JSON.stringify(user));
     return user;
     }))
  }
  signup(email:string,password:string,name:string ){
    const params = new FormData();
    params.append('email', email);
    params.append('password', password);
    params.append('name', name);
    return this.http.post<any>(`${baseUrl}/signup/`, params, {observe:'response', 
    withCredentials: true})
   .pipe(
   catchError(this.handleErrorsingup)
    )
   }
  logout(){
   return this.http.post<any>(`${baseUrl}/signout/`, {}).subscribe(
    response=>{

    this.useraccountSubject.next(null as any)
    sessionStorage.clear(); 
    this.router.navigate(['login'])
     }
   )

 }


   public get useraccountValue(): Useraccount{
   return this.useraccountSubject.value;
   }
  }

錯誤：錯誤型別錯誤：無法讀取 null 的屬性（讀取“用戶名”）

uj5u.com熱心網友回復：

從您的代碼中，我可以在類的構造中的 useraccountSubject 中看到該用戶，并在您創建實體時呼叫一次。我認為當您在登錄 API 中獲取用戶物件時，您必須將值設定為 useraccountSubject。

你可以按照這個例子

您可以嘗試以下代碼，否則在 stackbliz 中創建示例專案

    const params = new FormData();
    params.append('username', username);
    params.append('password', password);
    return this.http.post<any>(`${baseUrl}/signin/`, params, {observe:'response', 
    withCredentials: true})//withCredentials:true
   .pipe(map(user=>{
     // Try to set After getting response from login
    tap(user => {this.useraccountSubject.next((user));})
    catchError(this.handleError)
     sessionStorage.setItem("USER", JSON.stringify(user));
     return user;
     }))
  }```

uj5u.com熱心網友回復：

<ng-container *ngIf="user">
<li>{{user.username}}</li>
</ng-container>

user:any= this.authservice.useraccountValue;

標籤：javascript 有角度的 打字稿 角12

上一篇：如何使用web3js驗證Solana錢包地址？

下一篇：創建頁面中顯示的空輸入