Typescript Error: Type 'Observable<any[]>' is not assignable to type 'Observable<Feed[]>'


#1

I stuck with an issue, uploading my console screenshot.
Error told me to check “this.postList” of type.

in my app, this value’s type is Feed.interface.ts type.
But return value from firebase is any.

and console error happened.
I tried to solve this issue.
see below

1 change “this.postList” 's TYPE. ------------------------------------------------------
in feed.ts

before : postList$: Observable <Feed>;
after : postList$: Observable <Any>;

but it not work.

2 change “getPostList()” 's Return value type is any ------------------------------------
in daba.provider.ts

before :
getPostList(){
return this.postListRef;
}

after:
getPostList(){
return this.postListRef;
}

but it not work.


this is data.provider.ts

import { Company } from './../../model/company/company.interface';
import { Injectable } from "@angular/core";
import { AngularFireDatabase } from "angularfire2/database";
import { Feed } from "../../model/feed/feed.interface";

@Injectable()
export class DataProvider {

    private postListRef = this.db.list<Feed>('post');
    private firmListRef = this.db.list<Company>('adCompany');

    constructor( private db: AngularFireDatabase){}

    //adCompany の取得
    getFirmList(){
        return this.firmListRef;
    }

    // POST LIST の取得
    getPostList(){
        return this.postListRef;
    }

    addPost(post:Feed){
        return this.postListRef.push(post);
    }
}

and this is feed.ts

import { Company } from './../../model/company/company.interface';

import { DataProvider } from './../../provider/data/data.provider';
import { Component } from '@angular/core';
import { Observable } from '@firebase/util';
import { Feed } from '../../model/feed/feed.interface';
import { checkAndUpdateBinding } from '@angular/core/src/view/util';

@Component({
  selector: 'feed',
  templateUrl: 'feed.html'
})
export class FeedComponent {

  postList$: Observable <Feed[]>;
  firmList$: Observable <Company[]>

  constructor(private db: DataProvider) {

    this.postList$ = this.db.getPostList().snapshotChanges().map(   <----------I got this error here 
      changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }));
      });


    this.firmList$ = this.db.getFirmList().snapshotChanges().map(
      changes => {
        return changes.map(c => ({
          key: c.payload.key, ...c.payload.val()
        }));
      });
   }
}

JUST IN CASE : this is app.module.ts

import { DataProvider } from './../provider/data/data.provider';
import { FIREBASE_CONFIG } from './firebase.config';
import { ComponentsModule } from './../components/components.module';
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 { MyApp } from './app.component';

import { AngularFireModule} from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

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

feed.interface.ts


import { User } from "../user/user.interface";
import { Ad } from "../ad/ad.interface";

export interface Feed {
    key?: string;
    feedImage: string;
    title: string;
    content: string;
    user: User;
    ad: Ad;

}

Regards,

----Has this question been asked before?----
I had search this question many time.so I don’t make sure which someone asked before or not.
If there’s , let me know …

----One question per post----
OK , I have one question.

----Working Environment----
I had an error in this eviroment

ionic/cli-utils  : 1.19.1
ionic (Ionic CLI) : 3.19.1
cordova (Cordova CLI) : 8.0.0 

@ionic/app-scripts : 3.1.8
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.9.2

Node  : v7.10.0
npm   : 4.2.0 
OS    : macOS High Sierra
Xcode : Xcode 9.2 Build version 9C40b 

Environment Variables: ANDROID_HOME : not set
Misc:    backend : pro

#2

I solved this issue myself…

https://github.com/ngrx/store/issues/338

thank you


#3

at my Feed.ts .
I had to insert this

import { Observable } from ‘rxjs/Observable’;

It’s just mistake .


#4

Hi, @ohkawa

try to this kind of Observable

import { Observable } from 'rxjs/Rx';

thanks


#5

Hi @addwebsolution !

import { Observavle } from ‘rxjs/Observavle’ is work well at my app.
But You let me know rxjs/Rx.

I try to realize what different both .

arigato


#6

The import style is about to change in rxjs 6. Import however you like for the moment, but read the changelog so you know what’s coming.


#7

@AaronSterling san

I see !
it might be here ?
SUPER THANK YOU!

https://github.com/ReactiveX/rxjs/blob/master/CHANGELOG.md


#8

出来るだけ細かいインポートは好ましいです。rxjs か rxjs/Rx からインポートしますと、余計な物も入って来ますので、無意味でアプリが大きくなります。 RxJS 5現在では、 from 'rxjs/Observable'の方がいいです。

Until the changes @AaronSterling mentions in RxJS 6 come into play, you are best off importing from as tightly-focused a location as possible (rxjs/Obsevrable in this case). Expanding the import location only brings in unneeded bloat to your app.


#9

@rapropos
Thank a lot! I’m glad indeed!
Now I use “rxjs/observable” in my app. It worked well .

We were eventually able to do it well because @rapropos taught us so diligently .