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

Question

我尝试从网络服务器获取数据并使用ngFor填充表格。

这是我使用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>

我有这个类来获取数据：

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

由于错误表明应用程序是Observable而不是arry

*ngFor="let application of applications | async"