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

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

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

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

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

Подобно этому, я поставил "а" для облегчения счета.

Второе приложение (которое не работает) находится ниже

Красная линия под переменными this.cityNameRef $.

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>

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

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

надстройка-книга-рабочий-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",

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

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