ngFor *不从Angular 5中的REST端点返回数据

时间:2017-12-18 16:03:11

标签: angular rest ngfor

所以我正在尝试使用ngFor *将REST数据拉入我的html中,但我没有收到任何数据。我不确定发生了什么,因为它看起来与我所遵循的例子类似。我试图在导航栏中放置一些下拉菜单,但由于这不起作用,我现在已经简化了。这是我的ngFor *

<ul class="list-group">
  <li *ngFor="let conference of conferenceList" class="list-group-item">
    <ul>{{conference.conferenceName}}</ul>
  </li>
</ul>

会议服务:

import { HttpClient } from "@angular/common/http";
import {EventEmitter, Injectable} from "@angular/core";
import {Observable} from "rxjs/Observable";
import {Conference} from "./conference.model";

@Injectable()
export class ConferenceService {

   onConferenceAdded = new EventEmitter<Conference>();


   constructor(private http: HttpClient) {

   }

   getConferences(): Observable<any> {
     return this.http.get('/api/conference');
   }

}

我的会议列表组件:

import { Component, OnInit } from '@angular/core';
import {Conference} from "../conference.model";
import {ConferenceService} from "../conference.service";

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

  conferenceList: Conference[] = [];

  constructor(private conferenceService: ConferenceService) { }

  ngOnInit() {
    this.conferenceService.getConferences()
      .subscribe(
        (conferences: any[]) => {
          this.conferenceList = conferences;
        },
        (error) => console.log(error)
      )
  }

}

任何帮助将不胜感激,因为我已经研究了一段时间,似乎无法弄明白。 感谢。

1 个答案:

答案 0 :(得分:2)

如果您期望JSON,而不是服务中的数组

(conference:any []) - &gt;这种打字可能是错误的

使用(conferences: any)代替