Angular Property does not exist on type 'Object'
Comparing your JSON data and Product
interface, you have missed out sprints
property in your model.
Via json2ts
, your Product
interface should be as below:
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;
}
Another concern is the concern mentioned by @mat, as currentProject
data is asynchronous. Either you have to initialize the value to currentProject
:
@Input() currentProject: Project = {
title: '',
description: '',
accessCode: '',
sprints: []
};
Or using Typescript optional chaining (?.
) to escape error when currentProject
was null
or undefined
.
@Input() currentProject: Project;
<mat-toolbar>
<span>{{ currentProject?.title }}</span>
</mat-toolbar>
<div class="data-panel">
<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>
Sample Demo on StackBlitz