CODEWITHSUNDEEP
angularrestangular-cliangular-componentsweb-frontend
Ronaldo
Ronaldo

Reputation: 774

Can't display data in table (angular 6)

I am quite new to the angular world and am trying to display data in my table using a RESTapi call. However, this does not really work out as i expected it to do, since the table is always empty.

I've been looking for a solution for several hours now, but I just can't figure it out.

Any suggestions?

list-inklusionshelfer.component.html

<table>
  <thead>
    <th>Id</th>
    <th>firstname</th>
    <th>lastname</th>
  </thead>

  <tbody>
    <tr *ngFor="let inklusionshelfer of alleInklusionshelfer">
      <td>{{inklusionshelfer.id}}</td>
      <td>{{inklusionshelfer.firstname}}</td>
      <td>{{inklusionshelfer.lastname}}</td>
    </tr>
  </tbody>
</table>

list-inklusionshelfer.component.ts

import { Component, OnInit } from '@angular/core';
import { InklusionshelferService } from '../../shared_service/inklusionshelfer.service';
import { Inklusionshelfer } from '../../inklusionshelfer';
import { HttpClient } from '@angular/common/http';

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

  private alleInklusionshelfer:Inklusionshelfer[];
  constructor(private _inklusionshelferService:InklusionshelferService) { }

  ngOnInit() {
    this._inklusionshelferService.getAllInklusionshelfer().subscribe((alleInklusionshelfer)=>{
      console.log(alleInklusionshelfer);
      this.alleInklusionshelfer=this.alleInklusionshelfer;
    },(error)=>{
      console.log(error);
    })
  }

}

inklusionshelfer.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http'
import { Observable } from 'rxjs';
import { map, filter, scan, catchError } from 'rxjs/operators';
import { Inklusionshelfer } from '../inklusionshelfer';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class InklusionshelferService {
  private baseUrl:string='http://localhost:8080/api'
  private headers = new Headers ({'Content-Type':'application/json'});
  private options = new RequestOptions({headers:this.headers});
  constructor(private _http:HttpClient) { }
  //GET (EINEN USER)
  getInklusionshelfer(id:Number){
    return this._http.get(this.baseUrl+'/inklusionshelfer/'+id)
  }
  //GET (ALLE USER)
  getAllInklusionshelfer(){
    return this._http.get(this.baseUrl+'/inklusionshelfer')
  }
}

inklusionshelfer.ts

export class Inklusionshelfer {
    id:Number;
    firstname:string;
    lastname:string;
}

Upvotes: 1

Views: 1105

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222712

Just assign the alleInklusionshelfer instead of this.alleInklusionshelfer which is empty,

 this._inklusionshelferService.getAllInklusionshelfer().subscribe((alleInklusionshelfer)=>{
      console.log(alleInklusionshelfer);
      this.alleInklusionshelfer= alleInklusionshelfer;
}

also initialize to empty array,

 private alleInklusionshelfer:Inklusionshelfer[] = [];

Upvotes: 3

Related Questions