Angular 2 getter 没有异步

Question

好的。我正在尝试添加一些方法来对在可观察流中流动的对象的模型 class 进行建模，例如，我想将两个属性和 return 相乘得到新的属性。这在通过异步管道显示数据流时有效，但我如何使用普通订阅的可观察对象来做到这一点？我尝试通过 async - await return getter 但这不起作用

export interface IProduct {
  price: number;
  tax: string;
}

export class Product implements IProduct {
  constructor(
    public price: number,
    public tax: string,

  ) { }


  get grossPrice() {
    return this.price * parseInt(this.tax)
  }
}


export class ProductService {

   private url = ''

  constructor(private http: HttpClient){ }

  getAll(): Observable<Product[]> {
    return this.http.get<Product[]>(this.url)
}
}


@Component({
  template: `<div *ngFor="let product of products">
               {{ product.grossPrice }}
                </div>
              `
})
export class ProductsViewComponent implements OnInit, OnDestroy {
  products: Product[] = [];

constructor(private productService: ProductService){}
  this.productService
      .getAll()
      .subscribe(data => this.products = data)
}

Answer 1

这是将要编译的代码。您需要进行一些修复。

您需要将 HttpClient 调用返回的 IProduct 转换为 class 实例 Product。这是使用 Pipeable Operators, see also .
需要在ngOnInit调用服务，不是组件的构造函数
我提供了 2 个组件，一个使用异步管道，另一个使用 subscribe.

ProductService.ts

import { Observable } from 'rxjs/observable';
import { map } from 'rxjs/operators/map';
import { HttpClient } from '@angular/common/http';

export interface IProduct {
    price: number;
    tax: string;
}

export class Product implements IProduct {
    constructor(public price: number, public tax: string) {
    }

    get grossPrice() {
        return this.price * parseInt(this.tax);
    }
}

export class ProductService {
    private url = '';

    constructor(private http: HttpClient) { }

    getAll(): Observable<Product[]> {
        return this.http.get<IProduct[]>(this.url)
            .pipe(map((products) => {
                return products.map(p => new Product(p.price, p.tax));
            }));
    }
}

ProductsViewComponent.ts

订阅可观察对象并将结果分配给字段的组件。

import { Component, OnInit } from '@angular/core';
import { Product, ProductService } from './ProductService;

@Component({
    template: `<div *ngFor="let product of products">
                 {{ product.grossPrice }}
               </div>`
})
export class ProductsViewComponent implements OnInit {
    products: Product[] = [];

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.productService
            .getAll()
            .subscribe(data => this.products = data);
    }
}

ProductsViewAsyncPipeComponent.ts

使用异步管道的组件。

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/observable';
import { Product, ProductService } from './ProductService;

@Component({
    template: `<div *ngFor="let product of products | async">
                 {{ product.grossPrice }}
               </div>`
})
export class ProductsViewAsyncPipeComponent implements OnInit {
    products: Observable<Product[]>;

    constructor(private productService: ProductService) { }

    ngOnInit() {
        this.products = this.productService.getAll();
    }
}

Angular 2 getter 没有异步

Angular 2 getter without async

getter

angular