Question

我对角度世界还很陌生，正在尝试使用RESTapi调用在表中显示数据。但是，由于表始终为空，因此这并没有真正实现我的预期。

我一直在寻找解决方案已有几个小时，但我只是想不通。

有什么建议吗？

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;
}

Answer 1

只需分配 alleInklusionshelfer 而不是空的 this.alleInklusionshelfer

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

还初始化为空数组

 private alleInklusionshelfer:Inklusionshelfer[] = [];

无法在表格（角度6）中显示数据

1 个答案: