ProjectDetailsComponent.html: 18 ОШИБКА TypeError: Невозможно прочитать свойство 'id' из неопределенного

Question

У меня есть сборка RestApi в Django и я получаю ответ JSON для списка проектов на localhost:8000/project/list и для project-details на localhost:8000/project/details/:id

Я также создал соответствующую услугу, класс и компонент для полученияДанные JSON. Я также могу получить project_list и project_details.

Когда я выполняю GET Project_detials, он дает ответ JSON с данными, но также выдает эту ошибку во время выполнения.

"ProjectDetailsComponent.html: 18 ОШИБКА TypeError: Невозможно прочитать свойство '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

Не могли бы вы также вставить объект JSON, возвращенный в ответе API?

Django может отправить массив данных. Пожалуйста, попробуйте (в ProjectDetailsComponent.ts (Component)) this.project_details = data[0]; вместо this.project_details = data;