在我的 angular 應用程式上，我在瀏覽器除錯時出錯：
錯誤錯誤：未捕獲（承諾）：型別錯誤：無法讀取未定義的屬性（讀取“欄位”）
為什么我無法訪問此行中的 fields 屬性？
this.pictureUrl = this.currentUser.version.fields.field[0].fieldValue.path;
這是我的用戶模型
export interface EzUser {
mediaType: string;
href: string;
id: number;
remoteID: string;
contentType: ContentType;
name: string;
versions: ContentType;
section: ContentType;
mainLocation: ContentType;
locations: ContentType;
groups: ContentType;
owner: ContentType;
publishDate: Date;
lastModificationDate: Date;
mainLanguageCode: string;
alwaysAvailable: boolean;
version: Version;
login: string;
email: string;
enabled: boolean;
userGroups: ContentType;
roles: ContentType;
}
export interface ContentType {
mediaType: string;
href: string;
}
export interface Version {
mediaType: string;
href: string;
versionInfo: VersionInfo;
fields: Fields;
relations: Relations;
thumbnail: Thumbnail;
}
export interface Fields {
field: Field[];
}
export interface Field {
id: number;
fieldDefinitionIdentifier: string;
languageCode: string;
fieldTypeIdentifier: string;
fieldValue: FieldValueClass;
}
export interface FieldValueClass {
hasStoredLogin?: boolean;
contentID?: number;
login?: string;
email?: string;
passwordUpdatedAt?: number;
enabled?: boolean;
maxLogin?: number;
plainPassword?: null;
id?: string;
path?: string;
alternativeText?: string;
fileName?: string;
fileSize?: number;
imageID?: string;
uri?: string;
inputURI?: null;
width?: string;
height?: string;
additionalData?: any[];
variations?: Variations;
}
export interface Variations {
ezplatformAdminUIProfilePictureUserMenu: string;
large: string;
medium: string;
reference: string;
small: string;
tiny: Href;
}
export interface Href {
href: string;
}
export interface Relations {
mediaType: string;
href: string;
relation: any[];
}
export interface Thumbnail {
mediaType: string;
resource: string;
width: null;
height: null;
mimeType: string;
}
export interface VersionInfo {
id: number;
versionNo: number;
status: string;
modificationDate: Date;
creator: ContentType;
creationDate: Date;
initialLanguageCode: string;
languageCodes: string;
versionTranslationInfo: VersionTranslationInfo;
names: Names;
content: ContentType;
}
export interface Names {
value: Value[];
}
export interface Value {
languageCode: string;
text: string;
}
export interface VersionTranslationInfo {
mediaType: string;
language: Language[];
}
export interface Language {
languageCode: string;
}
這是我的資料
{
"_media-type": "application/vnd.ez.api.User json",
"_href": "/api/ezp/v2/user/users/14",
"_id": 14,
"_remoteId": "1bb4fe25487f05527efa8bfd394cecc7",
"ContentType": {
"_media-type": "application/vnd.ez.api.ContentType json",
"_href": "/api/ezp/v2/content/types/4"
},
"name": "Administrator User",
"Versions": {
"_media-type": "application/vnd.ez.api.VersionList json",
"_href": "/api/ezp/v2/content/objects/14/versions"
},
"Section": {
"_media-type": "application/vnd.ez.api.Section json",
"_href": "/api/ezp/v2/content/sections/2"
},
"MainLocation": {
"_media-type": "application/vnd.ez.api.Location json",
"_href": "/api/ezp/v2/content/locations/1/5/13/15"
},
"Locations": {
"_media-type": "application/vnd.ez.api.LocationList json",
"_href": "/api/ezp/v2/content/objects/14/locations"
},
"Groups": {
"_media-type": "application/vnd.ez.api.UserGroupRefList json",
"_href": "/api/ezp/v2/user/users/14/groups"
},
"Owner": {
"_media-type": "application/vnd.ez.api.User json",
"_href": "/api/ezp/v2/user/users/14"
},
"publishDate": "2002-10-06T16:13:50 00:00",
"lastModificationDate": "2021-12-21T17:23:49 00:00",
"mainLanguageCode": "eng-GB",
"alwaysAvailable": true,
"Version": {
"_media-type": "application/vnd.ez.api.Version json",
"_href": "/api/ezp/v2/content/objects/14/versions/5",
"VersionInfo": {
"id": 517,
"versionNo": 5,
"status": "PUBLISHED",
"modificationDate": "2021-12-21T17:23:49 00:00",
"Creator": {
"_media-type": "application/vnd.ez.api.User json",
"_href": "/api/ezp/v2/user/users/14"
},
"creationDate": "2021-12-21T17:23:48 00:00",
"initialLanguageCode": "eng-GB",
"languageCodes": "eng-GB",
"VersionTranslationInfo": {
"_media-type": "application/vnd.ez.api.VersionTranslationInfo json",
"Language": [{
"languageCode": "eng-GB"
}]
},
"names": {
"value": [{
"_languageCode": "eng-GB",
"#text": "Administrator User"
}]
},
"Content": {
"_media-type": "application/vnd.ez.api.ContentInfo json",
"_href": "/api/ezp/v2/content/objects/14"
}
},
"Fields": {
"field": [{
"id": 28,
"fieldDefinitionIdentifier": "first_name",
"languageCode": "eng-GB",
"fieldTypeIdentifier": "ezstring",
"fieldValue": "Administrator"
}, {
"id": 29,
"fieldDefinitionIdentifier": "last_name",
"languageCode": "eng-GB",
"fieldTypeIdentifier": "ezstring",
"fieldValue": "User"
}, {
"id": 30,
"fieldDefinitionIdentifier": "user_account",
"languageCode": "eng-GB",
"fieldTypeIdentifier": "ezuser",
"fieldValue": {
"hasStoredLogin": true,
"contentId": 14,
"login": "admin",
"email": "[email protected]",
"passwordUpdatedAt": 1640107428,
"enabled": true,
"maxLogin": 10,
"plainPassword": null
}
}, {
"id": 178,
"fieldDefinitionIdentifier": "signature",
"languageCode": "eng-GB",
"fieldTypeIdentifier": "eztext",
"fieldValue": "Mega boss"
}, {
"id": 180,
"fieldDefinitionIdentifier": "image",
"languageCode": "eng-GB",
"fieldTypeIdentifier": "ezimage",
"fieldValue": {
"id": "0/8/1/0/180-5-eng-GB/avatar_19.jpg",
"path": "/0/8/1/0/180-5-eng-GB/avatar_19.jpg",
"alternativeText": "",
"fileName": "avatar_19.jpg",
"fileSize": 50787,
"imageId": "14-180-5",
"uri": "/var/site/storage/images/0/8/1/0/180-5-eng-GB/avatar_19.jpg",
"inputUri": null,
"width": "480",
"height": "580",
"additionalData": [],
"variations": {
"ezplatform_admin_ui_profile_picture_user_menu": {
"href": "/api/ezp/v2/content/binary/images/14-180-5/variations/ezplatform_admin_ui_profile_picture_user_menu"
},
"large": {
"href": "/api/ezp/v2/content/binary/images/14-180-5/variations/large"
},
"medium": {
"href": "/api/ezp/v2/content/binary/images/14-180-5/variations/medium"
},
"reference": {
"href": "/api/ezp/v2/content/binary/images/14-180-5/variations/reference"
},
"small": {
"href": "/api/ezp/v2/content/binary/images/14-180-5/variations/small"
},
"tiny": {
"href": "/api/ezp/v2/content/binary/images/14-180-5/variations/tiny"
}
}
}
}]
},
"Relations": {
"_media-type": "application/vnd.ez.api.RelationList json",
"_href": "/api/ezp/v2/content/objects/14/versions/5/relations",
"Relation": []
},
"Thumbnail": {
"_media-type": "application/vnd.ez.api.Thumbnail json",
"resource": "/bundles/ezplatformadminui/img/ez-icons.svg#user",
"width": null,
"height": null,
"mimeType": "image/svg xml"
}
},
"login": "admin",
"email": "[email protected]",
"enabled": true,
"UserGroups": {
"_media-type": "application/vnd.ez.api.UserGroupList json",
"_href": "/api/ezp/v2/user/users/14/groups"
},
"Roles": {
"_media-type": "application/vnd.ez.api.RoleAssignmentList json",
"_href": "/api/ezp/v2/user/users/14/roles"
}
}
我的組件
import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/_models';
import { EzUser } from 'src/app/_models/ezuser';
import { AuthenticationService } from 'src/app/_services';
import { UserblockService } from './userblock.service';
@Component({
selector: 'app-userblock',
templateUrl: './userblock.component.html',
styleUrls: ['./userblock.component.scss']
})
export class UserblockComponent implements OnInit {
currentUser: EzUser;
error = '';
pictureUrl: string;
user: User = {
id: 1,
nome: 'ippo',
cognome: 'adad',
tipo: {id: 1, name: 'dsad'}
};
constructor(public userblockService: UserblockService, private authenticationService: AuthenticationService) {
this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
this.pictureUrl = this.currentUser.version.fields.field[0].fieldValue.path;
}
ngOnInit() {}
userBlockIsVisible(): boolean{
return this.userblockService.getVisibility();
}
}
uj5u.com熱心網友回復：
該欄位fields被讀取undefined意味著您currentUser未定義，實際上，您從未currentUser在建構式之前設定值，我想您的代碼應該是
this.authenticationService.currentUser.subscribe(x => {
this.currentUser = x
this.pictureUrl = this.currentUser.version.fields.field[0].fieldValue.path;
});
并且您應該檢查是否設定了圖片網址
uj5u.com熱心網友回復：
this.currentUser.versionis undefined，由異步編程中極其常見的錯誤引起。
constructor(public userblockService: UserblockService, private authenticationService: AuthenticationService) {
this.authenticationService.currentUser.subscribe(x => this.currentUser = x);
this.pictureUrl = this.currentUser.version.fields.field[0].fieldValue.path;
}
this.pictureUrl取決于緊接在它之前的 observable 的賦值，但由于這是一個異步函式，它不會等待它完成才繼續賦值this.pictureUrl。
您需要在 observable 中分配它，通常我在oncomplete handler 中執行此操作，盡管它也可以在onnext處理程式上。oncomplete僅在沒有錯誤時才呼叫。
constructor(public userblockService: UserblockService, private authenticationService: AuthenticationService) {
this.authenticationService.currentUser.subscribe(
user => this.currentUser = user,
error => console.error,
_ => this.pictureUrl = this.currentUser.version.fields.field[0].fieldValue.path
);
}
您還應該考慮在 Angular 生命周期掛鉤ngOnInit()而不是建構式中執行此操作。
uj5u.com熱心網友回復：
這是 AuthenticationService
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { Router } from '@angular/router';
import { EzUser } from '../_models/ezuser';
import { EzSession } from '../_models/ezsession';
import { User } from '../_models';
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
private currentUserSubject: BehaviorSubject<EzUser>;
public currentUser: Observable<EzUser>;
private currentSessionSubject: BehaviorSubject<EzSession>;
public currentSession: Observable<EzSession>;
constructor(private http: HttpClient, private router: Router) {
this.currentUserSubject = new BehaviorSubject<EzUser>(JSON.parse(sessionStorage.getItem('ezuser')));
this.currentUser = this.currentUserSubject.asObservable();
this.currentSessionSubject = new BehaviorSubject<EzSession>(JSON.parse(sessionStorage.getItem('ezsession')));
this.currentSession = this.currentSessionSubject.asObservable();
}
public get currentSessionValue(): EzSession {
return this.currentSessionSubject.value;
}
public get currentUserValue(): any {
return this.currentUserSubject.value;
}
login(username: string, pass: string): Observable<EzUser> {
const headers = {
headers: new HttpHeaders({
Accept: 'application/vnd.ez.api.Session json',
'Content-Type': 'application/vnd.ez.api.SessionInput json',
})
};
const body = {
SessionInput: {
login: username,
password: pass
}
};
return this.http.post<EzSession>(`${environment.apiUrl}/user/sessions`, body, headers).pipe(
map(result => {
// store user details and basic auth credentials in local storage to keep user logged in between page refreshes
// session.authdata = window.btoa(username ':' pass);
// sessionStorage.setItem('currentUser', JSON.stringify(session));
result.authdata = window.btoa(username ':' pass);
sessionStorage.setItem('ezsession', JSON.stringify(result));
this.currentSessionSubject.next(result);
return result;
}),
mergeMap((x) => {
const ezsession = JSON.parse(sessionStorage.getItem('ezsession'));
const headers2 = {
headers: new HttpHeaders({
'Content-Type': ezsession.Session['_media-type'],
Accept: ezsession.Session.User['_media-type']
})
};
return this.http.get<any>(`${ezsession.Session.User['_href']}`, headers2).pipe(map(result => {
debugger
sessionStorage.setItem('ezuser', JSON.stringify(result.User));
this.currentUserSubject.next(result);
return result.User;
}));
})
);
}
logout(): Observable<any[]> {
const ezsession = JSON.parse(sessionStorage.getItem('ezsession'));
const headers = {
headers: new HttpHeaders({
Cookie: ezsession.Session.name '=' ezsession.Session.identifier,
'X-CSRF-Token': ezsession.Session.csrfToken
})
};
return this.http.delete<any>(`${environment.apiUrl}/user/sessions/${ezsession.Session.identifier}`, headers).pipe(
map(result => {
sessionStorage.removeItem('ezsession');
sessionStorage.removeItem('ezuser');
this.currentSessionSubject.next(null);
this.currentUserSubject.next(null);
return result;
})
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/392318.html