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

Question

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

我还创建了用于接收 JSON 数据的相应服务、类和组件。我还能够获取 project_list 和 project_details。

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

“ProjectDetailsComponent.html:18 ERROR TypeError: 无法读取未定义的属性‘id’。”

project.ts（类）

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;