时间戳

首页 > 解决方案 > 在 ngfor 循环中以角度显示 json 数据（来自 firebase 的数据）

json - 在 ngfor 循环中以角度显示 json 数据（来自 firebase 的数据）

问题描述

在我的 Angular 代码中，我通过 Http get 请求从 firebase 数据库获取数据，当我尝试使用 ngfor 循环显示结果时，我收到一条错误消息。这个例子是从一个教程中复制而来的，它对他有用。问题出在哪里，我怎样才能让它发挥作用？感谢您的帮助！

我使用服务来获取数据这里是代码：

import {Http} from '@angular/http';
import { Injectable } from '@angular/core';
import {Response} from "@angular/http";
import {map} from 'rxjs/operators';



@Injectable()

export class ServerService {
constructor(private http:Http){}

StoreServers(servers:any[]){
return this.http.post('https://ng-http-a5718.firebaseio.com/data.json',servers);
}

GetServers(){
 return  this.http.get('https://ng-http-a5718.firebaseio.com/data.json').pipe(map(
  (res:Response) =>{
    const dataserver = res.json() as any[];
  for(const server of dataserver ){
    server.name='fetched_server'+server.name
  }     
  return dataserver;
}
  )
 )
}

}

这是我尝试显示数据的组件的 .ts 代码：

import { Component } from '@angular/core';
import { ServerService } from './server.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private ServerService : ServerService){}



  servers = [
    {
      name: 'Testserver',
      capacity: 10,
      id: this.generateId()
    },
    {
      name: 'Liveserver',
      capacity: 100,
      id: this.generateId()
    }
  ];
  onAddServer(name: string) {
    this.servers.push({
      name: name,
      capacity: 50,
      id: this.generateId()
    });
  }
  private generateId() {
    return Math.round(Math.random() * 10000);
  }


  OnSave(){
    this.ServerService.StoreServers(this.servers).subscribe(
      (Response)=>(console.log(Response)),
      (Error)=>(console.log(Error))
      )
  }

  OnGet(){
    this.ServerService.GetServers().subscribe(
      (data) => { this.servers=data}
        ,
      (Error)=>{
        return (console.log(Error));
      }
      )
  }
}

这是我尝试显示数据的组件的 html 代码：

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <input type="text" #serverName>
      <button class="btn btn-primary" (click)="onAddServer(serverName.value)">Add Server</button>
      <hr>
      <button class="btn btn-primary" (click)='OnSave()'>Save servers</button>
      <button class="btn btn-primary" (click)='OnGet()'>Get servers</button>
      <br>
      <ul class="list-group" *ngFor="let server of servers">
        <li class="list-group-item">{{ server.name }} (ID: {{ server.id }})</li>
      </ul>
    </div>
  </div>
</div>

最后，这是我收到的错误消息：

在此处输入图像描述

标签： jsonangularhttp

解决方案

this.server expecting Array in onGet() method but getting Object from firebase with the unique key. so you can modify onGet() method in following:

OnGet(){
    this.ServerService.GetServers().subscribe(
      (data) => { 
      const keys = Object.keys(data);
      const firstKey = keys[0];
      this.servers = data[firstKey]; // get the inside array
      
      }
        ,
      (Error)=>{
        return (console.log(Error));
      }
      )
  }

推荐阅读