在视图 Angular2 中渲染动态数组

Question

我有一个动态数组，当在内部添加/删除某些项目时，我想在组件的视图中呈现它。

该数组由我的 App 组件 (ts):

中的 ngOnInit() 方法呈现

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

  }

}

"The view" 用于我的 App 组件 (html):

中的数组

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

我的 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

更新：

正如@TuongLe 在评论中所说，如果您手动订阅您的可观察对象，那么您应该在 ngOnDestroy 中调用 unsubscribe 以防止内存泄漏。

您可以

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"

在视图 Angular2 中渲染动态数组

Render dynamic array in the view Angular2

javascript

dynamic-arrays

typescript

angular