angular - Wrong type of object after subscribe in RxJS

Question

I have an Angular 4 app.

I have a service that fetch data from Firebase database by API URL:

import { Product } from './../models/product';
import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AppSettings } from '../app-settings';

@Injectable()
export class ProductsService {

  products = [];

  constructor(private http: HttpClient) { }

  getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(AppSettings.DB_API_ENDPOINT + '/products.json',);
  }
}

And the component that displays that data:

import { Product } from './../../models/product';
import { Component, OnInit, Input } from '@angular/core';
import { ProductsService } from '../../services/products.service';
import { CategoriesService } from '../../services/categories.service';

@Component({
  selector: 'products-list',
  templateUrl: './products-list.component.html',
  styleUrls: ['./products-list.component.scss']
})
export class ProductsListComponent implements OnInit {

  products: Product[];
  numberOfProducts: number;
  page: number;

  constructor(private productsService: ProductsService, private categoriesService: CategoriesService) {
    this.page = 1;
    this.numberOfProducts = 0;
    this.products = [];
  }

  ngOnInit() {
    this.productsService.getProducts().subscribe(products => {
      console.log(products[0].getId());
      this.products.push(products[0] as Product);
      this.numberOfProducts = this.products.reduce((prev, el) => {
        return prev + el.qtyAvailable;
      }, 0);
    });
  }

  qtyChange(qty: number) {
    this.numberOfProducts -= qty;
  }

}

And the model Product:

export class Product {
    $key: string;
    qty: number;
    isSoldOut: boolean;

    constructor(
        private id: number,
        private name: string,
        private description: string,
        public qtyAvailable: number,
        private price: number,
        private image: string,
        public category: string
    ) {
        this.isSoldOut = false;
        this.qty = 0;
    }

    isAvailable() {
        return !this.isSoldOut;
    }

    getImageUrl() {
        return '/assets/images/products/' + this.image;
    }

    public getId(): number {
        return this.id;
    }

    getPrice() {
        return this.price;
    }

    getDescription() {
        return this.description;
    }

    getName(): string {
        return this.name;
    }
}

In the view of that component I use product.isAvailable() method from the model Product. I get th error message in console ERROR TypeError: _co.product.isAvailable is not a function. But when I type products[0].id in the service I get the error message while compile, that id is a private of Product. The list of producsts is displayed and paginated but without data, because of this error message.

Answer 1

Waitting for answers