angular - Angular displays only ID number from Java REST

Question

I am making CRUD app with SpringBoot and Angular. I am using MySQL to this, and when I make POST request in Postman I can see all my date displayed in JSON file. So in Angular I have service with:

export class GetdataService {
  constructor(private http: HttpClient) {}

  getAllTodos() {
    return this.http.get < Todo[] > ('http://wwww.localhost:8081/todos');
  }
} 

My Component where I am saving data:

export class TaskListComponent implements OnInit {
  todos: Todo[];

  constructor(private getDataService: GetdataService) {}

  ngOnInit() {
    this.refreshTodos();
  }

  refreshTodos() {
    console.log(this.getDataService.getAllTodos().subscribe(
      response => {
        console.log(response);
        this.todos = response;
      }
    ));
  }
}

export class Todo {
  constructor(
    public id: number,
    public description: string,
    public status: boolean,
    public date: Date
  ) {}
} 

In console.log I am able to see my JSON format with correct data from database. When I start angular application I do not have any errors in console but on my browser I can see only id numbers. Do not know what might be wrong in this case.

<div class="container">
  <table class="table">
    <thead>
    <tr>
      <th>Id</th>
      <th>Target Date</th>
      <th>is Completed?</th>
      <th>Update</th>
      <th>Delete</th>
    </tr>
    </thead>
    <tbody>

    <tr *ngFor="let todo of todos">
      <td>{{todo.description}}</td>
      <td>{{todo.id}}</td>
      <td>{{todo.status}}</td>
      <td>{{todo.date}}</td>    
    </tr>

    </tbody>    
  </table>    
</div>

标签： angularspringspring-boot

Answer 1

You might have the incorrect property name, which is causing this issue.