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

我在Django中构建了RestApi，并在

localhost:8000/project/list

处接收到项目列表的JSON响应，在

localhost:8000/project/details/:id

处接收到

project details

我还为接收JSON数据创建了相应的服务、类和组件。我还能够获得

project\u列表

以及

project\u详细信息

当我得到

Project\u detials

时，它会给出带有数据的JSON响应，但在运行时也会给出此错误

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

project.ts（班级）

ProjectDetailsComponent.html（html）

身份证件
名称
地位
描述
开始日期
到期日
{{project_details.id}
{{project_details.projectname}
{{project_details.project_status}}
{{project_details.description}
{{project_details.start_date}
{{project_details.due_date}

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

Django可能会发送一个数据数组。 请尝试（在ProjectDetailsComponent.ts（组件）中）

this.project_details=data[0]
代替
this.project\u details=数据
这是I console.log（）时的JSON响应。{id:1，projectname:“Bug Tracking System”，project_status:“Pending”，description:“This is the description for Bug Tracking System”，start_date:“2019-06-28”…}我得到了响应，但控制台中也出现了错误。
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);
    });
  }

}

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);
    });
  }

}

<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>