Question

我有一个Angular 4应用程序。

我有一项服务，可以通过API网址从Firebase数据库中获取数据：

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',);
  }
}

显示该数据的组件：

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;
  }

}

模型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;
    }
}

在该组件的视图中，我使用模型product.isAvailable()中的Product方法。我在控制台ERROR TypeError: _co.product.isAvailable is not a function中收到错误消息。但是当我在服务中输入products[0].id时，我在编译时收到错误消息，id是Product的私有。由于此错误消息，生成列表显示并分页，但没有数据。

Answer 1

这是在Rxjs中组织此方法的更好方法。这将处理您服务中的所有内容：

getProducts(): Observable<Product[]> {
    return this.http.get<Product[]>(AppSettings.DB_API_ENDPOINT + '/products.json',)
      .switchMap(res => res); // make the retrieved list an Observable itself
      .map(product => new Product(product.name // etc)) // map every json object to an instance of your class
      .toArray(); // when the list is over, the Observable created from the json list will complete, and all of the emitted values will be stored in an array
}

有关参考，请参阅以下链接：switchMap operator，toArray operator

这种方式更清晰，更易读，并且采用更多反应式风格

Answer 2

我通过使用JavaScript对象的数组语法来解决我的问题，在Product方法中创建subscribe类型的对象：

this.productsService.getProducts().subscribe(products => {
      this.products = products.map(p => new Product(p['id'], p['name'], p['description'], p['qtyAvailable'], p['price'],p['image'], p['category']));
      this.numberOfProducts = this.products.reduce((prev, el) => {
        return prev + el.qtyAvailable;
      }, 0);
    });

但是，我认为这是多余的。 Angular应该自动将类型转换为Product[]，是吗？

在RxJS中订阅后错误的对象类型

2 个答案: