Ionic 4 использует Angular 5, данные из Firebase не отображаются на html-странице

Question

Я использую Angular 5 с ionic 4, только потому, что это то, что было сгенерировано.Я следовал различным урокам и дошел до этого, но, похоже, я застрял на последнем препятствии.Я искал в Интернете и пытался реализовать различные идеи, но на моей странице все еще ничего не отображается, и у меня нет предупреждений об ошибках или ошибок страницы в консоли.Я нашел лучший совет здесь о переполнении стека, хотя и для неправильной версии Angular :( В Firebase моей конечной точкой является профиль. Заранее большое спасибо, если кто-то уже сталкивался с этой проблемой и может помочь.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule, AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuthModule } from '@angular/fire/auth';


import { MyApp } from './app.component';
import { FIREBASE_CONFIG } from './app.firebase.config';
import { LoginPage } from '../pages/login/login';
import { ProfileListService } from '../services/profile-list/profile-list.service';



@NgModule({
  declarations: [
    MyApp,
    LoginPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(FIREBASE_CONFIG),
    AngularFireDatabaseModule,
    AngularFireAuthModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AngularFireDatabase,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ProfileListService
  ]
})
export class AppModule {}

profile.ts

    export interface Profile {
      key?: string;
      name: string;
      industry: string;
      jobtitle: string;
    }

**home.ts**

import { Component } from "@angular/core";
import {
  IonicPage,
  NavController,
  NavParams,
  ToastController
} from "ionic-angular";
import { AngularFireAuth } from "angularfire2/auth";
import { Observable } from "rxjs/Observable";
import { Profile } from "../../models/profile";

import { ProfileListService } from "../../services/profile-list/profile-list.service";
import { map } from "rxjs/operators/map";

@IonicPage()
@Component({
  selector: "page-home",
  templateUrl: "home.html"
})
export class HomePage {
  public profileList$: Observable<Profile[]>;

  constructor(
    public profile: ProfileListService,
    private afAth: AngularFireAuth,
    public toast: ToastController,
    public navCtrl: NavController,
    public navParams: NavParams
  ) {}

  ionViewWillLoad() {
    this.afAth.authState.subscribe(data => {
      if (data && data.email && data.uid) {
        this.toast
          .create({
            message: `Welcome to your profile  ${data.email}`,
            duration: 4000
          })
          .present();
        this.profileList$ = this.profile
          .getProfileList()
          .snapshotChanges()
          .pipe(
            map(items => {
              return items.map(a => {
                const data = a.payload.val();
                const key = a.payload.key;
                return { key, ...data };
              });
            })
          );
      } else {
        this.toast
          .create({
            message: "You are not authenticated",
            duration: 4000
          })
          .present();
      }
    });
  }
}

home.html

<ion-header>

  <ion-navbar color='primary'>
    <ion-title>Your profile </ion-title>

  </ion-navbar>

</ion-header>


<ion-content padding>

<ion-list>
<ion-list-header></ion-list-header>
<ion-item *ngFor="let profile of profilelist$ | async">
{{profile.name}}
{{profile.industry}}
</ion-item>
</ion-list>


<button ion-button clear block (click)='campaign()'>Create campaign</button>
</ion-content>

package.json

{
  "name": "ProfileApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.12.0",
    "@ionic-native/splash-screen": "~4.12.0",
    "@ionic-native/status-bar": "~4.12.0",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "2.1.3",
    "angularfire2": "^5.0.1",
    "firebase": "^5.4.2",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.11",
    "rxjs-compat": "^6.3.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}