我有一个使用 Angular-12 的代码。如下图：
界面：
export interface ICandidate {
id: number;
first_name: string;
other_name: string;
last_name : string;
email: string;
gender : string;
user_photo: any;
marital_status: string;
dob : Date;
address : string;
cv_file: any;
achievement: IAchievement[];
certificate: ICertificate[];
education: IEducation[];
experience: IExperience[];
skills: ISkill[];
}
candidate.service:
import { ICandidate, IAchievement, ICertificate, IEducation, IExperience, ISkill } from '../models/candidate.model';
@Injectable({
providedIn: 'root'
})
export class CandidateService {
constructor(
private http: HttpClient,
private token: TokenService,
private api: ApiService
) { }
private candidateDetails!: ICandidate;
getCandidateDetails(): ICandidate {
return this.candidateDetails;
}
setCandidateDetails(candidateDetails: ICandidate): void {
this.candidateDetails = candidateDetails;
}
getCandidateProfile(): Observable<ICandidate> {
let headers = new HttpHeaders();
headers = headers.set('Authorization', this.token.get());
const url: string = this.api.baseURL + 'display';
return this.http.get<ICandidate>(url, { headers });
}
}
组件：
import { Component, OnInit } from '@angular/core';
import { CandidateService } from 'src/app/features/driver/services/candidate.service';
import { ICandidate } from 'src/app/features/driver/models/candidate.model';
import { AppState } from 'src/app/store/reducers';
@Component({
selector: 'app-profile-list',
templateUrl: './profile-list.component.html',
styleUrls: ['./profile-list.component.scss']
})
export class ProfileListComponent implements OnInit {
public loggedIn!: boolean;
candidateDetails!: ICandidate;
constructor(
private store: Store<fromStore.AppState>,
private router: Router,
private auth: AuthService,
private token: TokenService,
private api : ApiService,
private candidateService: CandidateService,
) {
}
ngOnInit(): void {
this.candidateService.getCandidateProfile().subscribe(
(response) => {
console.log(response);
this.candidateDetails = response;
console.log(this.candidateDetails);
this.candidateService.setCandidateDetails(this.candidateDetails);
});
}
}
当我做 console.log(response);在组件中，我得到：
{
"message": "Profile Successfully Retrieved.",
"error": false,
"code": 200,
"results": {
"profile": {
"id": 2,
"user_type": "Teacher",
"created_at": "2021-07-07T07:19:13.000000Z",
"updated_at": "2021-07-15T09:57:48.000000Z",
"deleted_at": null,
"last_login_at": "2021-07-15T09:57:48.000000Z",
"detail": {
"id": 1,
"user_id": 2,
"first_name": "Lamptey",
"last_name": "Akwetey",
"other_name": null,
"email": "lamptey@yahoo.com",
"gender": null,
"user_photo": null,
"marital_status": null,
"dob": null,
"address": null,
"cv_file": null,
"summary": null,
"created_at": "2021-07-07T07:19:13.000000Z",
"updated_at": null
},
"educations": [],
"experiences": [],
"achievements": [],
"certificates": [],
"skills": [],
"employees": []
}
}
配置文件和详细信息具有单一数据。
现在我想显示个人资料、详细信息、教育和经历
<块引用>{{CandidateDetails.results.profile.user_type }}
给出这个错误：
<块引用>属性 'results' 不存在于类型 'ICandidate'.ngt
同样的
{{CandidateDetails.results.profile.detail.first_name }}
如何解决这个问题？
谢谢
答案 0 :(得分：0)
响应属于 ICandidate 类型，如您在Candidate.service 文件中所写：getCandidateProfile(): Observable<ICandidate> 并且您将整个响应分配给了CandidateDetails，就像您在此处所做的那样：this.candidateDetails = response;
您的 ICandidate 界面具有以下属性：
id: number;
first_name: string;
other_name: string;
last_name : string;
email: string;
gender : string;
user_photo: any;
marital_status: string;
dob : Date;
address : string;
cv_file: any;
achievement: IAchievement[];
certificate: ICertificate[];
education: IEducation[];
experience: IExperience[];
skills: ISkill[];
您收到该错误是因为您的响应与您的 ICandidate 接口的属性不同。
您的回复中还有一个额外的“详细信息”参数。您应该将后端设置为以您在 ICandidate 界面中配置的相同方式返回数据，并且当属性相同且名称相同时，您就可以了。
起初我以为“detail”参数包含了 ICandidate 中定义的所有参数，但后来发现它们不一样，例如缺少这些参数
"educations": [],
"experiences": [],
"achievements": [],
"certificates": [],
"skills": [],
因此，第一步是将 ICandidate 接口所需的所有数据放入“详细信息”中，然后您可以在响应中像这样设置数据：
this.candidateDetails = response.results.profile.details。
答案 1 :(得分：0)
根据您提供的 JSON 结果和Candidate.service.ts 中的getCandidateProfile，您不能将其转换为ICandidate，因为JSON 结果与ICandidate 模板不匹配。相反，ICandidate 是 JSON 的一小部分。
您的界面应如下所示：
<块引用>response.model.ts
export interface IResponse<T> {
message: string;
error: boolean,
code: number,
results: T;
}
candidate.model.ts
export interface IProfile {
profile: ICandidate;
}
export interface ICandidate {
id: number;
user_type: string;
created_at: string;
updated_at: string;
deleted_at: string;
last_login_at: string;
detail: ICandidateDetail;
achievement: IAchievement[];
certificate: ICertificate[];
education: IEducation[];
experience: IExperience[];
skills: ISkill[];
}
export interface ICandidateDetail {
id: number;
first_name: string;
other_name: string;
last_name: string;
email: string;
gender: string;
user_photo: any;
marital_status: string;
dob: Date;
address: string;
cv_file: any;
}
与此同时，我通过添加 ICandidate 来更正您的 detail: ICandidateDetail，其中 ICandidateDetails 包含 first_name、last_name 等属性以与您的 JSON 匹配模板。
candidate.service.ts
getCandidateProfile(): Observable<IResponse<IProfile>> {
let headers = new HttpHeaders();
headers = headers.set('Authorization', this.token.get());
const url: string = this.api.baseURL + 'display';
return this.http.get<IResponse<IProfile>>(url, { headers });
}
您也可以查看变量命名和类型，例如 candidate 和 candidateDetail 以避免混淆。
profile-list.component.ts
export class ProfileListComponent implements OnInit {
...
candidate!: ICandidate;
candidateDetail!: ICandidateDetail;
...
ngOnInit(): void {
this.candidateService.getCandidateProfile().subscribe(
(response: IResponse<IProfile>) => {
console.log(response);
this.candidate = response.results.profile;
this.candidateDetail = response.results.profile.detail;
this.candidateService.setCandidateDetails(this.candidate);
});
}
}