Question

我是Angular的新手。

我正在关注youtube for ionic with firebase.

的教程

但是，与教程

相比，我在本文发表时使用的是最新模块

node v.8.94
npm 5.6.0
cordova@8.0.0
ionic@3.19.1
rxjs@5.5.6
angularfire2@5.0.0-rc.6
firebase@4.9.0

我遇到了一个问题，如下面的屏幕截图所示，

跑步在创建这篇文章之前，我尝试了类似帖子中提出的各种解决方案但无济于事。请帮忙。

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseService } from './../../providers/firebase-service/firebase-service';
import { AngularFireList } from 'angularfire2/database/interfaces';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  posts: AngularFireList<any[]>;
  newPost: '';

  constructor(public navCtrl: NavController, public firebaseService: FirebaseService) {
    this.posts = this.firebaseService.getPosts();
  }

  addPost() {
    this.firebaseService.addPost(this.newPost);
  }

  removePost(id) {
    this.firebaseService.removePost(id);
  }
}

火力-service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class FirebaseService {

  constructor(public afd: AngularFireDatabase) {}

  getPosts() {
    return this.afd.list('/posts/');
  }

  addPost(title) {
    this.afd.list('/posts/').push(title);
  }

  removePost(id) {
    this.afd.list('/posts/').remove(id);
  }
}

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row justify-content-center>
      <ion-col col-8>
        <ion-item>
          <ion-input type="text" [(ngModel)]="newPost" placeholder="New post"></ion-input>
        </ion-item>
      </ion-col>
      <ion-col col-auto>
        <button ion-button (click)="addPost()">Post!</button>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-list>
    <ion-item-sliding *ngFor="let post of posts | async">
      <ion-item>
        {{ post.$value }}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="danger" icon-only (click)="removePost(post.$key)">
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>
</ion-content>

UPDATE1： 通过更改

解决语法错误

posts: AngularFireList<any[]>;

到

posts: AngularFireList<{}>;

但仍然遇到相同的运行时错误。

UPDATE2： 试着评论出来帖子：AngularFireList＆lt; {}＆gt;;

App运行没有错误。但那不是解决方案。

Answer 1

AngularFire的GetPosts返回通用的AngularFireList。通过定义AngularFireList，你说你的列表元素/项目将是T类型。既然AngularFireList已经是可枚举的（类似数组）类型，你应该用它来定义：

posts: AngularFireList<{}>;

这就是说你期待“某些”对象。这与撰写any相同。您将其定义为数组（或二维数组）列表，该列表与AngularFire服务返回的类型不匹配。

Answer 2

你试过了吗？

posts: AngularFireList<{}>;

Answer 3

找到更好的方法来做到这一点

<强> home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';  
import { Observable } from 'rxjs/Observable';
import { FirebaseService } from './../../providers/firebase-service/firebase-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  posts: Observable<any[]>;

  constructor(public navCtrl: NavController, public firebaseService: FirebaseService) {
        this.posts = this.firebaseService
  .getPosts() // DB LIST
  .map(changes => {
    return changes.map(c => ({
      key: c.payload.key, ...c.payload.val()
    }))
  });
  }
}

<强>火力-service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';

@Injectable()
export class FirebaseService {
  private postsRef = this.db.list<any>('/posts');

  constructor(public afd: AngularFireDatabase) {}

  getPosts() {
    return this.postsRef.snapshotChanges();
  }
}

尝试从firebase检索列表时出现Ionic Runtime错误

3 个答案: