AngularFireList' TypeError: Object(...) is not a function at SwitchMapSubscriber.project

Posted 2023-03-13

【中文标题】AngularFireList\' TypeError: Object(...) is not a function at SwitchMapSubscriber.project

【英文标题】：AngularFireList' TypeError: Object(...) is not a function at SwitchMapSubscriber.projectAngularFireList' TypeError: Object(...) is not a function at SwitchMapSubscriber.project

【发布时间】：2019-02-13 05:15:24

【问题描述】：

我的家.ts

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();
  

我的家.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(...) 不是函数

当问题尚未发生时，我似乎无法显示事件列表

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)

【参考方案1】：

有几个问题。当您尝试将类型设置为AngularFireList<EventDetail> 时，主要是使用= 而不是: 和newEventListRef$。下一个问题是AngularFireList<EventDetail> 之后的括号()。删除括号 () 并将 = 替换为 : 应该可以解决问题。我还建议向db.list() 提供type，例如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();
  

希望对您有所帮助！

【讨论】：

是的，很好。我在底部的方块中是正确的。谢谢！已更新。

感谢 Alexander Staroselsky 和 ​​Matt McCutchen 的详细解释，我可以说我是 ionic 新手，这个解释很有帮助！

我有一个较新的问题，我按照您所说的进行

您将需要创建一个新问题，因为它是一个完全不同的问题。它还将使您有机会更详细地描述该问题。谢谢！