项目详细信息组件.html：18 错误类型错误： 无法读取未定义的属性'id'

Question

我在Django中构建了RestApi，并在localhost:8000/project/list和localhost:8000/project/details/:id中分别接收到项目列表和project-details的JSON响应

我还创建了相应的服务、类和组件来接收JSON数据。我还可以获得project_list和project_details。

当我获取Project_detials时，它会给出带有DATA的JSON响应，但也会在运行时给出此错误。

"ProjectDetailsComponent.html:18错误类型错误：无法读取未定义的属性'id'。">

project.ts(Class(

export class Project_list {
id : number;
projectname : string;
}
export class Project_details {
id : number;
projectname : string;
project_status : string;
description : string;
start_date : Date;
due_date : Date;
}
```
# project.service.ts (Service)
```
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Project_list,Project_details } from '../models/project';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class ProjectService {
private projectUrl: string;
constructor(private http: HttpClient) { 
this.projectUrl = 'http://localhost:8000/project';
}
public findAllProjects(): Observable<Project_list[]>
{
return this.http.get<Project_list[]>(this.projectUrl+'/list');
}
public findProjectById(id:number) : Observable<any>
{
return this.http.get<Project_details>(this.projectUrl+'/details/'+id+'/');
} 
}
```
# ProjectListComponent.ts (Component)
```
import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../../../services/project.service'
import { Project_list } from '../../../models/project'
@Component({
selector: 'app-project-list',
templateUrl: './project-list.component.html',
styleUrls: ['./project-list.component.css']
})
export class ProjectListComponent implements OnInit {
project_list : Project_list[];
constructor( private projectService:ProjectService ) { }
ngOnInit() {
this.projectService.findAllProjects().subscribe(data => {
this.project_list = data;
console.log(data);
});
}
}

ProjectDetailsComponent.ts(组件(

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../../../services/project.service';
import {Project_details} from '../../../models/project';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-project-details',
templateUrl: './project-details.component.html',
styleUrls: ['./project-details.component.css']
})
export class ProjectDetailsComponent implements OnInit {
project_details : Project_details;
id:number;
private sub:any;
constructor(private projectService:ProjectService, private route: ActivatedRoute) { }
ngOnInit() {
this.sub = this.route.params.subscribe(params => {
this.id = +params['id'];
console.log(this.id);
});
this.projectService.findProjectById(this.id).subscribe(data => {
this.project_details = data;
console.log(this.project_details);
});
}
}

ProjectDetailsComponent.html(html(

<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
<th scope="col">Description</th>
<th scope="col">Start Date</th>
<th scope="col">Due Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ project_details.id }}</td>
<td>{{ project_details.projectname }}</td>
<td>{{ project_details.project_status }}</td>
<td>{{ project_details.description }}</td>
<td>{{ project_details.start_date }}</td>
<td>{{ project_details.due_date }}</td></td>
</tr>
</tbody>
</table>

Answer 1

您是否也可以粘贴API响应中返回的JSON对象？

Django可能会发送一个数据数组。请尝试(在ProjectDetailsComponent.ts(组件(中(this.project_details = data[0];指示this.project_details = data;