ngOnDestroy Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined答案

【问题标题】：ngOnDestroy Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefinedngOnDestroy Uncaught (in promise): TypeError: Cannot read property 'unsubscribe' of undefined
【发布时间】：2017-07-03 20:16:26
【问题描述】：

当我单击链接转到我的食谱页面时，在我的 shopping-edit.component.ts 中的 ngOnDestroy 方法期间取消订阅时出现错误。这是图片

error on link click

这里是我的 git https://github.com/CHBaker/First-Angular-App的链接

和我的代码 sn-p:

import {
    Component,
    OnInit,
    OnDestroy,
    ViewChild
} from '@angular/core';
import { NgForm } from '@angular/forms';
import { Subscription } from 'rxjs/Subscription';


import { Ingredient } from '../../shared/ingredient.model';
import { ShoppingListService } from '../shopping-list.service';

@Component({
    selector: 'app-shopping-edit',
    templateUrl: './shopping-edit.component.html',
    styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit, OnDestroy {
    @ViewChild('f') slForm: NgForm;
    subscription: Subscription;
    editMode = false;
    editedItemIndex: number;
    editedItem: Ingredient;

    constructor(private slService: ShoppingListService) { }

    ngOnInit() {
        this.slService.startedEditing
            .subscribe(
                (index: number) => {
                    this.editedItemIndex = index;
                    this.editMode = true;
                    this.editedItem = this.slService.getIngredient(index);
                    this.slForm.setValue({
                        name: this.editedItem.name,
                        amount: this.editedItem.amount
                    })
                }
            );
    }

    onSubmit(form: NgForm) {
        const value = form.value;
        const newIngredient = new Ingredient(value.name, value.amount);
        if (this.editMode) {
            this.slService.updateIngredient(this.editedItemIndex, newIngredient);
        } else {
            this.slService.addIngredient(newIngredient);
        }
        this.editMode = false;
        form.reset();
    }

    onClear() {
        this.slForm.reset();
        this.editMode = false;
    }

    onDelete() {
        this.slService.deleteIngredient(this.editedItemIndex);
        this.onClear();
    }

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

【问题讨论】：

您是否 100% 确定 this.subscription 实际上包含一个 Subscription 对象？

标签： angular

【解决方案1】：

因为在ngOnInit 期间无法订阅，所以遇到了类似问题。

简单地通过以下方式修复：

 ngOnDestroy(): void {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }

【讨论】：

【解决方案2】：

试试这个

this.subscription = this.slService.startedEditing
        .subscribe(
            (index: number) => {
                this.editedItemIndex = index;
                this.editMode = true;
                this.editedItem = this.slService.getIngredient(index);
                this.slForm.setValue({
                    name: this.editedItem.name,
                    amount: this.editedItem.amount
                })
            }
        );

【讨论】：

【解决方案3】：

我修好了，愚蠢的错误。

在订阅前在 ngOnInit 上定义 this.subscription =。

【讨论】：

【解决方案4】：

您必须将this.slService.startedEditing.subscribe() 的结果分配给this.subscription

【讨论】：