Calling the Set class. It is not possible to call an expression whose type does not have a call signature using BehaviorSubject and Observable

Question

as indicated in the header, I get the following error when trying to install a new one Item:

Cannot invoke an expression whose type does not have a call signature. The type 'ItemModel' does not have compatible call signatures.

I use BehaviorSubjectand Subjectfor sharing set Itembetween two different states. In fact, I want to install the selected one Item, and then, going to the details page, get it.

Here is my item.model.ts, let it only have the property id:

export class ItemModel {
    public id: string;
    constructor( id: string ) {
        this.id = id;
    }
}

Here my is item.service.tsused for getand seta Item:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

import { ItemModel } from './item.model';

@Injectable()
export class ItemService {

    public _item = new BehaviorSubject<ItemModel>(null);
    item$ = this._item.asObservable();

    public set item(item: ItemModel) {
        this._item.next(item);
    }

    public get item() : ItemModel {
        return this._item.getValue();
    }

}

My item.component.ts Item:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { ItemService } from '../item.service';

@Component({
    selector: 'app-item',
    templateUrl: './item.html',
    styleUrls: ['./item.scss'],
    providers: [ItemService]
})

export class ItemComponent {

    constructor(private _router: Router, private _itemService : ItemService) { }

    goToDetails(item : ItemModel){
       this._itemService.item(item); //Throws the error
       this._router.navigate(['/details', item.id]);
    }

}

details.page.ts Item:

 import { Component } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { ItemService } from './item.service';
 import { ItemModel } from './item.model';

 @Component({
     selector: 'app-details-page',
     templateUrl: './details.page.html',
     styleUrls: ['./details.page.scss'],
     providers: [ItemService]
 })

 export class DetailsPage {

     private _item = ItemModel;
     private subscription : Subscription;

     constructor( private _itemService: ItemService ) { }

     ngOnInit() {

         this.subscription = this._itemService.item$
             .subscribe(item => console.log(item));

     }

 }

, :

• item as ItemModel
• item as typeof ItemModel
• , @Sefe
• , Typescript GitHub

? , ItemModel ?

@n00dl3 . , , details.page.ts ngOnInit null. , .

Answer 1

itemService.item setter, , :

this._itemService.item = item;

MDN:

. - , , , :

var language = {
  set current(name) {
    this.log.push(name);
  },
  log: []
}

language.current = 'EN';
console.log(language.log); // ['EN']

language.current = 'FA';
console.log(language.log); // ['EN', 'FA']

null vs item:

, , NgModule ( ):

@NgModule({
  imports:[CommonModule],
  declarations:[SomeComponent],
  providers:[ItemService]
})
export class myModule{}

, , . ( .) , , DetailsPage ItemComponent.