angular - Angular-Observable 可以像属性一样工作吗？

Question

我试图为购物车做一个柜台，我做了一个方法返回一个可观察的（我的购物车的项目编号）。属性以这种方式获取该方法的值

.ts 代码

import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';

export class ToolbarComponent implements OnInit {


  public num_item:number= this.NumItemsCart();

  NumItemsCart():Observable<number>{
    let cadena_items = '';
    let array_temp = [];
    let num_items=0;
    
    cadena_items = localStorage.getItem('ecmm_list_shopcart');

    array_temp= cadena_items.split(',')
    
    num_items= array_temp.length -1

    return of(num_items)
  }
}

html代码

 <div *ngIf="num_item > 0" class="counter_items_cart">{{num_item}}</div>

但是我得到了这个建议错误'Type 'Observable' is not assignable to type 'number' in

public num_item:number= this.NumItemsCart();'

标签： angularrxjsobservable

Answer 1

您可以在模板中使用异步管道来解开您的 Observable 以像使用属性一样使用它。

      <div *ngIf="(num_item | async) as noOfItems" class="counter_items_cart">{{noOfItems}}</div>