我在使用 Angular 時遇到了一些問題。
我正在嘗試遍歷 JSON Api，但我收到訊息“屬性不存在于型別‘物件’上。
不完全是，錯誤是“'Project'型別上不存在屬性'sprints'”
我有這個HTML 模板：
<mat-toolbar>
<span>{{ currentProject.title }}</span>
</mat-toolbar>
<div >
<mat-card>
<mat-toolbar style="border-radius: 4px 4px 0px 0px;">
<span>Development</span>
</mat-toolbar>
<mat-card-content>
<span>Access Code: {{ currentProject.accessCode }}</span>
<div *ngFor="let sprint of currentProject.sprints"> <---- THIS IS WERE THE ERROR HAPPENS
<span>{{ sprint }}</span>
</div>
</mat-card-content>
</mat-card>
</div>
還有我的JSON：
{
"id": 1,
"title": "App Komputer",
"description": "Website dedicated to computer related products",
"accessCode": "5128",
"createdAt": "2022-01-13T21:19:11.000Z",
"updatedAt": "2022-01-13T21:19:16.000Z",
"sprints": [{
"id": 1,
"title": "Sprint 1",
"releaseDate": "2022-01-20T21:37:13.000Z",
"description": "Specs up to 01/22/2022",
"createdAt": "2022-01-13T21:37:58.000Z",
"updatedAt": "2021-12-13T01:46:36.000Z",
"projectId": 1,
"specifications": [{
"id": 1,
"title": "Add product button",
"description": "New product button HTML",
"duration": 10,
"status": 1,
"createdAt": "2021-12-23T01:46:36.000Z",
"updatedAt": "2021-12-23T01:46:36.000Z",
"sprintId": 1
}]
}]
}
另外，這是我的組件：
constructor(
private projectService: ProjectService,
private route: ActivatedRoute,
private router: Router,
private _titleService: Title
) { }
ngOnInit(): void {
if (!this.viewMode) {
this.message = '';
this.getProject(this.route.snapshot.params["id"]);
}
}
getProject(id: string): void {
this.projectService.get(id)
.subscribe({
next: (data) => {
this.currentProject = data;
console.log(data);
this._titleService.setTitle(data.title ' · Scrumy');
},
error: (e) => console.error(e)
});
}
我該如何解決這個錯誤？我嘗試了很多東西，但沒有一個奏效。
謝謝！
編輯 2022 年 1 月 22 日
對于那些詢問的人，這里是project-details-component.ts的完整方案，我從中獲取功能：
import { Component, Input, OnInit } from '@angular/core';
import { ProjectService } from 'src/app/services/project.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Project } from 'src/app/models/project.model';
import { Title } from "@angular/platform-browser";
import { Moment } from 'moment';
import { EChartsOption } from 'echarts';
@Component({
selector: 'app-project-details',
templateUrl: './project-details.component.html',
styleUrls: ['./project-details.component.css']
})
export class ProjectDetailsComponent implements OnInit {
@Input() viewMode = false;
@Input() currentProject: Project = {
title: '',
description: '',
accessCode: ''
};
message = '';
constructor(
private projectService: ProjectService,
private route: ActivatedRoute,
private router: Router,
private _titleService: Title
) { }
ngOnInit(): void {
if (!this.viewMode) {
this.message = '';
this.getProject(this.route.snapshot.params["id"]);
}
}
getProject(id: string): void {
this.projectService.get(id)
.subscribe({
next: (data) => {
this.currentProject = data;
console.log(data);
this._titleService.setTitle(data.title ' · Scrumy');
},
error: (e) => console.error(e)
});
}
}
這是project.model.ts：
export class Project {
id?: any;
title?: string;
description?: string;
accessCode?: string;
createdAt?: Date;
updatedAt?: Date;
}
uj5u.com熱心網友回復：
比較您的 JSON 資料和Product介面，您錯過了sprints模型中的屬性。
通過json2ts，您的Product界面應如下所示：
export interface RootObject {
id: number;
title: string;
description: string;
accessCode: string;
createdAt: Date;
updatedAt: Date;
sprints: Sprint[];
}
export interface Sprint {
id: number;
title: string;
releaseDate: Date;
description: string;
createdAt: Date;
updatedAt: Date;
projectId: number;
specifications: Specification[];
}
export interface Specification {
id: number;
title: string;
description: string;
duration: number;
status: number;
createdAt: Date;
updatedAt: Date;
sprintId: number;
}
另一個問題是@mat 提到的問題，因為currentProject資料是異步的。您必須將值初始化為currentProject：
@Input() currentProject: Project = {
title: '',
description: '',
accessCode: '',
sprints: []
};
或者使用Typescript 可選鏈 ( ?.)在currentProjectwasnull或undefined.
@Input() currentProject: Project;
<mat-toolbar>
<span>{{ currentProject?.title }}</span>
</mat-toolbar>
<div >
<mat-card>
<mat-toolbar style="border-radius: 4px 4px 0px 0px;">
<span>Development</span>
</mat-toolbar>
<mat-card-content>
<span>Access Code: {{ currentProject?.accessCode }}</span>
<div *ngFor="let sprint of currentProject?.sprints">
<span>{{ sprint | json }}</span>
</div>
</mat-card-content>
</mat-card>
</div>
StackBlitz 上的示例演示
uj5u.com熱心網友回復：
你不會也得到title和accessCode屬性的錯誤嗎？因為您將同步代碼與異步代碼混合在一起，這通常會導致您面臨的問題。
解釋一下，您的模板期望currentProject立即可用，這是不正確的，因為您從某些服務加載它。并且取決于您的模板想要從中提取資料currentProject但尚未初始化的時間。
如果您不想重寫代碼以使用async管道，請將整個塊放入*ngIf="!!currentProject", or add question marks before currentProject` 屬性。
<span>Access Code: {{ currentProject?.accessCode }}</span>
<div *ngFor="let sprint of currentProject?.sprints">
<span>{{ sprint }}</span>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/420729.html
標籤：