AngularFireList 'относится только к типу, но используется здесь как значение

Question

Мой дом.тс

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { EventDetail } from '../../models/event-detail/event-detail.interface';


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

  @ViewChild('SwipedTabsSlider') SwipedTabsSlider: Slides ;

  SwipedTabsIndicator :any= null;
  tabs:any=[];

  newEventListRef$ : AngularFireList<EventDetail>;
  newEventList$: Observable<EventDetail[]>;

  constructor(public navCtrl: NavController, private database: AngularFireDatabase) {
    this.tabs=["New", "Upcoming"];
    this.newEventListRef$ = this.database.list<EventDetail>('event-list');
    this.newEventList$ = this.newEventListRef$.valueChanges();
  }

my home.html

<ion-content>

<ion-segment class="SwipeTabs">
<ion-segment-button *ngFor='let tab of tabs ; let i = index ' value="IngoreMe" (click)="selectTab(i)"
    [ngClass]='{ "SwipedTabs-activeTab" : ( this.SwipedTabsSlider  && ( this.SwipedTabsSlider.getActiveIndex() === i || (  tabs.length -1 === i&& this.SwipedTabsSlider.isEnd()))) }' >
        {{tab}}
    </ion-segment-button>
 </ion-segment>

  <div id='indicator' class="SwipedTabs-indicatorSegment" [ngStyle]=" 
{'width.%': (100/this.tabs.length)}"></div>

  <ion-slides #SwipedTabsSlider  (ionSlideDrag)="animateIndicator($event)"
  (ionSlideWillChange)="updateIndicatorPosition()"
  (ionSlideDidChange)="updateIndicatorPosition()"
  (pan)="updateIndicatorPosition()"
  [pager]="false">

<ion-slide>

  <ion-list>
    <ion-item *ngFor="let new of newEventList$ | async">
      <h2>{{new.eventName}}</h2>
      <h4>{{new.eventDesc}}</h4>
      <h6>{{new.lat}}</h6>
      <h6>{{new.lgt}}</h6>
    </ion-item>
  </ion-list>

</ion-slide>

<ion-slide>

</ion-slide>

ошибка: ошибка типа: объект (...) не является функцией

я не могу отобразить список событий, когда проблема еще не возникла

TypeError: Object (...) не является функцией на SwitchMapSubscriber.project (http://localhost:8100/build/vendor.js:77814:76) на SwitchMapSubscriber._next (http://localhost:8100/build/vendor.js:62612:27) на SwitchMapSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18) на RefCountSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26) на RefCountSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18) на Subject.next (http://localhost:8100/build/vendor.js:23237:25) на ConnectableSubscriber.Subscriber._next (http://localhost:8100/build/vendor.js:20786:26) на ConnectableSubscriber.Subscriber.next (http://localhost:8100/build/vendor.js:20750:18) на Notification.observe (http://localhost:8100/build/vendor.js:52585:50) в AsyncAction.DelaySubscriber.dispatch (http://localhost:8100/build/vendor.js:80114:40)

Answer 1

Есть пара вопросов. Основным является то, что вы используете = вместо : с newEventListRef$ при попытке установить тип на AngularFireList<EventDetail>. Следующей проблемой является скобка () после AngularFireList<EventDetail>. Удаление скобок () и замена = на : должны решить проблему. Я также рекомендовал бы предоставить тип до db.list() как this.db.list<EventDetail>('event-detail').

newEventListRef$: AngularFireList<EventDetail>;

Пример использования:

import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { Observable } from 'rxjs';

@Component({
  template: `
    <ul>
      <li *ngFor="let item of newEventList$ | async">{{item.someProperty}}</li>
    </ul>
  `
})
export class HomePage {
  newEventListRef$: AngularFireList<EventDetail>;
  newEventList$: Observable<EventDetail[]>;

  constructor(private db: AngularFireDatabase) {
    this.newEventListRef$ = this.db.list<EventDetail>('event-detail');
    this.newEventList$ = this.newEventListRef$.valueChanges();
  }
}

Надеюсь, это поможет!