从 Web 服务器填充 ngFor Table 时出错

Question

我尝试从 Web 服务器获取数据并用 ngFor 填充 table。

这是我的 table 我使用 ngFor:

<div class="applic-liste">
  <table class="table table-striped table-hover table-bordered">
    <tbody>
      <tr *ngFor="let application of applications">
        <td>{{application.id}}</td>
        <td>{{application.name}}</td>
        <td>{{application.version}}</td>
        <td>{{application.fromTo}}</td>
        <td>{{application.description}}</td>
        <td>{{application.geography}}</td>
      </tr>
</tbody>
  </table> 
  </div>

我有这个 class 来获取数据：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { DbService } from '../../db.service.service';
import {Application} from '../application.component';

@Component({
  selector: 'app-applic-list',
  templateUrl: './applic-list.component.html',
  styleUrls: ['./applic-list.component.css'],
  providers: [DbService],
  encapsulation: ViewEncapsulation.None
})
export class ApplicListComponent implements OnInit {

  constructor(private _dbService:DbService) { }
  applications:any;  
  ngOnInit() {
    this.getData();
  }

  getData(){
    this._dbService
       .getData()
       .subscribe(applications => {
         this.applications = applications;
     } )
 }

}

这是我的 service 我连接到网络服务器的地方：

@Injectable()
export class DbService {
  applications=[];
  private _serverUrl: string = "http://localhost/api/";
  constructor(private _http:Http) { }

 getData(){
    return this._http.get(this._serverUrl+'select.php').
    map((response:Response) => response.json);
  }
}

我也在这个 class:

中定义了我的应用程序数组

export class Application implements OnInit {

  constructor() { }
  name: string;
  version: string;
  fromTo: string;
  description: string;
  geography: string;
  ngOnInit() {
  }

}

这些是我得到的错误：

有人可以帮我解决这个问题吗？我是 Angular.. 的新手，我不知道问题出在哪里

感谢您的回答！

编辑： 这是我的 json-回复： [{"id":"1","name":"TestName","version":"1.2","fromTo":"Test","description":"Beschreibung","geography":"Geography"}]

Answer 1

As error suggest that applications is Observable not arry

*ngFor="let application of applications | async"

从 Web 服务器填充 ngFor Table 时出错

Error when populating ngFor Table from Webserver

fetch

typescript

ngfor

angular