Список проектов не отображается на Angular, ошибки в консоли chrome dev отсутствуют - PullRequest
Новая
       5

Список проектов не отображается на Angular, ошибки в консоли chrome dev отсутствуют

0 голосов
/ 26 мая 2020

Итак, я пытаюсь создать трекер ошибок с angular и весенней загрузкой. Мне удалось отобразить список сотрудников из базы данных, и он отлично работает. Я столкнулся с ошибкой перекрестного происхождения, но я исправил ее, добавив @CrossOrigin в весенние репозитории.

Теперь я пытаюсь сделать то же самое со списком проектов, выполнив тот же процесс со списком сотрудников, но я не могу показать это. В консоли отладки chrome ошибок нет.

Расширение Augury показывает состояние компонентов, и список сотрудников действительно имеет заполненный массив. Но для компонента проекта вообще нет массива.

Это мой список-проектов-компонентов.ts: 

import { Component, OnInit } from '@angular/core';
import { Project } from 'src/app/common/project';
import { ProjectService } from 'src/app/services/project.service';

@Component({
  selector: 'app-project-list',
  //templateUrl: './project-list-table.component.html',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.css']
})
export class ProjectListComponent implements OnInit {

  projects: Project[];

  constructor(private projectService: ProjectService) { }

  ngOnInit() {
    this.listProjects();
  }

  listProjects(){
    this.projectService.getProjectList().subscribe(
      data => {
        this.projects = data;
      }
    );
  }

}

Это мой project.service.ts: 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Project } from '../common/project';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {

  private baseUrl = 'http://localhost:8080/api/projects';

  constructor(private httpClient: HttpClient) { }

  getProjectList(): Observable<Project[]> {
    return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
      map(response => response._embedded.projects)
    );
  }
}

interface GetResponse {
 _embedded: {
   projects: Project[];
 }
}

А это мой project-list.component. html: 

<p *ngFor="let tempProject of projects">
  {{ tempProject.projectName }}, {{ tempProject.description }}, {{ tempProject.stage }}
</p>

Я добавил Project Service к поставщикам модулей приложений. Я добавил селектор app-project-list в app.component. html

У меня есть единственный класс проекта, определенный в той же папке, что и сотрудник. Поля соответствуют json, которые я получаю от API пружинной опоры. Конечная точка открывается, поэтому, если я перейду к baseUrl проектов, они будут показаны.

Что мне интересно, есть ли проблемы с подпиской в ​​service.ts? Они должны быть двумя отдельными наблюдаемыми, верно? Или это как-то связано с асинхронными операциями? Или тот факт, что я ввожу тот же httpClient? Извините, я новичок в этом материале.

Журнал карты: 

{_embedded: {…}, _links: {…}, page: {…}}
page:
number: 0
size: 20
totalElements: 3
totalPages: 1
__proto__: Object
_embedded:
project: Array(3)
0: {projectName: "Game App", description: "A simple game", stage: "Completed", _links: {…}}
1: {projectName: "Web Browser", description: "A complicated browser", stage: "In progress", _links: {…}}
2: {projectName: "Music Player", description: "A intermediate musica player", stage: "Not started", _links: {…}}
length: 3
__proto__: Array(0)
__proto__: Object
_links:
profile: {href: "http://localhost:8080/api/profile/projects"}
self: {href: "http://localhost:8080/api/projects"}
__proto__: Object
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ ()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

1 Ответ

1 голос
/ 26 мая 2020

Судя по опубликованному вами объекту, свойство называется project, а не projects. Так что попробуйте следующее 

getProjectList(): Observable<Project[]> {
  return this.httpClient.get<GetResponse>(this.baseUrl).pipe(
    map(response => response._embedded.project)      // <-- replace `projects` with `project`
  );
}
...