-2

这是基于 Angular 2 构建的电子商务购物车。当我离开此组件并加载任何其他组件时，我收到错误消息

例外：未捕获（承诺）：错误：./ProductsComponent 类 ProductsComponent 中的错误 - 内联模板：11:4 原因：无法读取未定义的属性“取消订阅”

我尝试删除私人订阅：订阅和 ngOnDestroy。但仍然得到同样的错误。

  import { Component, OnInit, OnDestroy } from '@angular/core';
  import { Products } from './products';
  import { PRODUCTS } from './product_list';
  import { Subscription } from 'rxjs/Rx';
  import { PaginationService } from './pagination.service';
  import { Pagination } from './pagination';
  import 'rxjs/add/operator/switchMap';

  @Component({
    selector: 'any-products',
    templateUrl: './products.component.html',
    styleUrls: ['./products.component.css']
  })

  export class ProductsComponent implements OnInit, OnDestroy {

    color: string;
    allProducts = PRODUCTS;
    private subscription: Subscription;
    paginationNow : Pagination = this.paginationService.CreatePaginationNow(this.paginationService.productPerPage);
    products : Array<Products> = this.allProducts.slice((this.paginationNow.paginationLowerLimit-1),this.paginationNow.paginationHigherLimit); 

    constructor( private paginationService : PaginationService ) { }

    ngOnInit() {
      this.subscription = this.paginationService.pushedPagination.subscribe(
        PaginationNow => {
          this.paginationNow = PaginationNow;
           this.products = this.allProducts.slice((this.paginationNow.paginationLowerLimit-1),this.paginationNow.paginationHigherLimit);
        }        
      );      
    }

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

在此处输入图像描述

4

1 回答 1

0

我解决了这个问题。

“ ProductsComponent - 内联模板：11:4”

我一直在寻找产品组件的订阅问题，但真正的问题在于此处未提供的产品组件的子组件。

产品组件的子路径（pagination.component.ts）的问题是：

ngOnInit() {
     this.paginationService.pushedPagination.subscribe(
        PaginationNow => {
          this.paginationNow = PaginationNow;       
        }
      ); 

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

我改变的是：

  ngOnInit() {    
     this.subscription = this.paginationService.pushedPagination
        .subscribe(
               PaginationNow => {
                    this.paginationNow = PaginationNow;       
                }
          );

由于我对 Angular 2 故障排除缺乏经验。（内联模板：11:4）

于 2017-03-26T14:52:50.337 回答