Question

我打算将我的Web应用程序连接到firebase，我有VPN但运行后，我的仪表板组件没有显示，并且有一些错误：

发生错误：响应app / hero.service.js：57 错误错误：node_modules/@angular/core/bundles/core.umd.js：1091 未捕获（承诺）：状态响应：找不到404的URL： https://my firebase数据库名称/.json

这是我的代码：的 DashboardComponent：

        import { Component, OnInit } from '@angular/core';
import {Http} from '@angular/http';
import { Hero }        from './hero';
import { HeroService } from './hero.service';


@Component({
  selector: 'my-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: [ './dashboard.component.css' ]
})
export class DashboardComponent implements OnInit {
  heroes: Hero[] = [];

  constructor(private heroService: HeroService) { }

  ngOnInit(): void {
    this.heroService.getHeroes()
      .then(heroes => this.heroes = heroes.slice(1, 5));

  }



}

hero.service.ts

          import { Injectable }    from '@angular/core';
import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Hero } from './hero';

@Injectable()
export class HeroService {

  private headers = new Headers({'Content-Type': 'application/json'});
  private heroesUrl = private heroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json";  // URL to web api

  constructor(private http: Http) { }

  getHeroes(): Promise<Hero[]> {
    return this.http.get(this.heroesUrl)
               .toPromise()
               .then(response => response.json().data as Hero[])
               .catch(this.handleError);
  }


  getHero(id: number): Promise<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get(url)
      .toPromise()
      .then(response => response.json().data as Hero)
      .catch(this.handleError);
  }

  delete(id: number): Promise<void> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.delete(url, {headers: this.headers})
      .toPromise()
      .then(() => null)
      .catch(this.handleError);
  }

  create(name: string): Promise<Hero> {
    return this.http
      .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
      .toPromise()
      .then(res => res.json().data as Hero)
      .catch(this.handleError);
  }

  update(hero: Hero): Promise<Hero> {
    const url = `${this.heroesUrl}/${hero.id}`;
    return this.http
      .put(url, JSON.stringify(hero), {headers: this.headers})
      .toPromise()
      .then(() => hero)
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error); // for demo purposes only
    return Promise.reject(error.message || error);
  }
}

的index.html

  <!DOCTYPE html>
    <html>
  <head>
    <base href="/">
    <title>Angular Tour of Heroes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">

    <!-- Polyfills -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>


  <body>
    <my-app>Loading...</my-app>
    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js"></script>

<script>
  // Initialize Firebase
  var config = {
    apiKey: "my firebase project apikey",
    authDomain: "my firebase projec domain name",
    databaseURL: "my firebase projec database name",
    projectId: "my firebase projec ID",
    storageBucket: "my firebase projec storage",
    messagingSenderId: "my firebase projec senderId"
  };
  firebase.initializeApp(config);
</script>


  </head>
  </body>
</html>

app.module.ts

     import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

import { AppRoutingModule } from './app-routing.module';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService }  from './in-memory-data.service';

import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { HeroSearchComponent }  from './hero-search.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService),
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent
  ],
  providers: [ HeroService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Answer 1

尝试更新网址heroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json"。

Answer 2

首先，我看到您使用了InMemoryWebApi。您需要从NgModule中删除以下行，它会干扰您的“真实”http请求。因此，从NgModule移除以下行：

InMemoryWebApiModule.forRoot(InMemoryDataService)

然后注意您服务中的额外private heroesUrl：

private heroesUrl = private heroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json";

应该是：

private heroesUrl = "https://tour-of-heroes-bcc7b.firebaseio.com/.json";

接下来是您服务中的getHeroes功能。您收到的JSON是一个数组，因此您的响应中没有对象data，它将包含您要查找的数组，因此请更改：

.then(response => response.json().data as Hero[])

到

.then(response => response.json() as Hero[])

我想我已经确定了错误（希望如此）。这是一点点

Demo

<强>更新

新错误slice is not a function是由您更改了请求网址引起的，因此数据已更改，现在我们不再处理数组，而是处理对象对象。因此，您需要创建一个循环并提取每个对象并将它们推送到heroes数组。所以你的订阅会如下所示：

this.heroService.getHeroes()
  .then(data => {
    // iterate the object and push each object from inside that object to your array
    for(let obj in data) {
      this.heroes.push(data[obj])
    }
    console.log(this.heroes)
    this.heroes = this.heroes.slice(1, 5)
  });

将角度web应用程序连接到firebase

2 个答案:

Demo

<强>更新

Demo