Render динамический массив в представлении Angular2

Question

У меня есть динамический массив, который я хочу отобразить в представлении компонента, когда некоторые элементы добавлены/удалены внутри.

Массив оказывает ngOnInit() метода в моем App компонента (TS):

import { Component, OnInit } from '@angular/core'; 
import { CartService } from './cart/cart.service'; 

import '../style/app.scss'; 

@Component({ 
    selector: 'my-app', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.scss'], 
}) 
export class AppComponent { 
    cartItems: any; 
    image: any; 
    item: any; 

    constructor(public cartService: CartService) { } 

    ngOnInit(){ 
    this.cartService.cart$.subscribe((val) => { 
     console.log(this.cartService.cartArr)//console shows the array properly, but nothing is shown in the view if I remove "console.log" 
    }); 

    } 

} 

"Вид" для массива внутри моего приложения Component (HTML):

<ul class="cart"> 
    <li class="cart__item" *ngFor="let item of cartArr"> 
     ... 
    </li> 
</ul> 

My CartService:

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


@Injectable() 
export class CartService { 
    public cart$ = new BehaviorSubject(null); 
    public cartArr = []; 

    constructor(){ } 

    public addToCart(prod) { 
     this.cartArr.push(prod); 
     this.cart$.next(this.cartArr); 
    } 
} 

Так интересно, как визуализировать массив в компоненте html и почему мой код не работает за пределами консоли?

Answer 1

Update:

Как сказал @TuongLe в комментариях, если вы вручную подписаться на ваш наблюдаемый, то вы должны вызвать unsubscribe в ngOnDestroy, чтобы предотвратить утечку памяти.

Вы можете либо

1) установить значение массива:

cartItems: any[]; 

cartSubscription: Subscription; 

ngOnInit() { 
    this.cartSubscription = this.cartService.cart$.subscribe((val) => { 
    this.cartItems = val; 
    }); 
} 

ngOnDestroy() { 
    this.cartSubscription.unsubscribe(); 
} 

вид

*ngFor="let item of cartItems" 

или

2) использовать async трубы, как:

*ngFor="let item of cartService.cart$ | async"