Javascript 将angular web应用程序连接到firebase_Javascript_Json_Node.js_Angular_Firebase

Javascript 将angular web应用程序连接到firebase

javascript json node.js angular firebase

Javascript 将angular web应用程序连接到firebase,javascript,json,node.js,angular,firebase,Javascript,Json,Node.js,Angular,Firebase,我想将我的web应用程序连接到firebase，我有VPN，但运行后，我的仪表板组件未显示，并且出现一些错误：出现错误：Response app/hero.service.js:57 错误：node_modules/@angular/core/bundles/core.umd.js:1091 未捕获（承诺中）：URL未找到状态为404的响应： firebase数据库名称/.json 这是我的代码：仪表板组件： import { Component, OnInit } from

我想将我的web应用程序连接到firebase，我有VPN，但运行后，我的仪表板组件未显示，并且出现一些错误：

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

这是我的代码： 仪表板组件：

        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);
  }
}

尝试更新url

heroesUrl=”https://tour-of-heroes-bcc7b.firebaseio.com/.json“

首先，我看到您在MemoryWebAPI中使用了

。您需要从NgModule
中删除以下行，它将干扰您的“真实”http请求。因此，从NgModule
中删除以下行：
InMemoryWebApiModule.forRoot（InMemoryDataService）

然后注意服务中额外的私有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是一个数组，因此您的响应中没有包含您正在查找的数组的对象数据
，因此请更改：
.then（response=>response.json（）.data作为英雄[]）

到
.then（response=>response.json（）作为英雄[]）

我想我已经查明了错误（希望如此）。这里有一点

更新：
新的错误slice不是一个函数
是由于您更改了请求url导致的，因此数据发生了更改，现在我们不再处理数组，而是处理对象的对象。因此，您需要创建一个循环并提取每个对象，然后将它们推送到您的英雄
数组中。因此，您的订阅将如下所示：
this.heroService.getheros（）
。然后（数据=>{
//迭代对象并将每个对象从该对象内部推送到数组中
for（让obj输入数据）{
this.heroses.push（数据[obj]）
}
console.log（this.heroses）
this.heroses=this.heroses.slice（1,5）
});

问题就在这里-private heroesUrl=”https://my firebase数据库名称/.json”这里应该有一个FirebaseYou数据库的真实url非常感谢。我的真实cod是：private heroesUrl=“”；但是它不起作用。嗨。谢谢。当我更改代码时，出现了另一个错误：node_modules/@angular/core/bundles/core.umd.js:1091错误：Uncaught（承诺中）：TypeError:heros.slice不是函数TypeError:heros.slice不是ZoneDelegate.invoke（zone.js:365）的eval（app/dashboard.component.js:22）函数在Object.onInvoke（node_modules/@angular/core/bundles/core.umd.js:4132）你能帮我吗？你能用你的代码把Plunk分叉吗？这样我就可以看看了？我在这里没有看到分叉版本？上次更新2天前。。。请检查一下，我会看一看：）你是对的。我犯了一个错误。我犯了一个新的错误。我更新了我的答案，请求的是另一个url，数据的形状与第一个url不同。但现在它应该起作用了：）
  <!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>

     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 { }