AngularFirebase2, Ionic 3: возврат данных через firebase не работает полностью

Question

Я работаю над проектом о CRUD.

Когда я пытался отобразить данные из firebase с помощью наблюдаемого в первом приложении (скриншоты и коды вызываются firstApplication), все работает стабильно.Но когда я пробую этот код (полностью такой же без имен переменных) во втором приложении, я получаю ошибку

Observable<{}> not assignable to type Observable<any[]>, когда я помещаю свою мышь в красную линию, которая находится под переменной

Нокогда я считаю ионные параметры, которые я использовал для отображения данных из базы данных, число данных истинно.Я просто не получаю его к индексу данных .

Как то, я просто обозначил его "a" для подсчета.

Второе приложение (Что не работает) ниже

Красная линия под this.cityNameRef $ variable.

add-book.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase , AngularFireList} from 'angularfire2/database'; 
import { Observable } from 'rxjs/Observable';
import { getNameOfCity } from '../../model/getNameOfCity.interface';

@Component({
  selector: 'page-add-book',
  templateUrl: 'add-book.html',
})

export class AddBookPage {
    //cityName = {} as getNameOfCity;
    //cityNameRef$: AngularFireList<getNameOfCity>
    cityNameRef$: Observable<any>;

    constructor(
        public navCtrl: NavController,
        public navParams: NavParams,
        private database: AngularFireDatabase
        ) {

        this.cityNameRef$ = this.database.list('Cities/').valueChanges();

    }
}

<ion-header>

  <ion-navbar>
    <ion-title>addBook</ion-title>
  </ion-navbar>

add-book.html

<ion-header>

      <ion-navbar>
        <ion-title>addBook</ion-title>
      </ion-navbar>

    </ion-header>

    <ion-content padding>

        <ion-select >
            <ion-option *ngFor="let form of cityNameRef$ | async">
                {{ form.nameOfCity }} {{form.value}} 
            </ion-option>

        </ion-select>

    </ion-content>

Но когда я прихожу к первому Приложению (которое стабильно работает)

Все работает стабильно и сообщений об ошибках нет, но коды одинаковы

add-book-working-stable.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AddShoppingPage } from '../add-shopping/add-shopping'; 
import { AngularFireDatabase , AngularFireList } from 'angularfire2/database'; 
import { ShoppingItem } from '../../app/models/shopping-item/shopping-item.interface';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-shopping-list',
  templateUrl: 'shopping-list.html',
})

export class ShoppingListPage {
     shoppingListRef$: Observable<any[]>;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private database: AngularFireDatabase
    ) {

    this.shoppingListRef$ = this.database.list('Cities/').valueChanges();

  }

  navigateToAddShoppingPage(){
    this.navCtrl.push(AddShoppingPage);
  }

}

-

 "ionic-angular": "3.9.2",
 "angularfire2": "^5.1.1",
 "rxjs": "^6.0.0",
 "rxjs-compat": "^6.3.3",

Любая идея о том, в чем проблема или в чем заключается, я не понимаю.

Спасибо в любом случае!

Answer 1

это в основном говорит, что ваш объект не массив.При внесении любого в любой массив должен быть разрешен.

от

 cityNameRef$:Observable<any>;

до

 cityNameRef$: Observable<any[]>;