javascript - `Property ' alive ' does not exist` on app compile

Question

当我尝试运行我的 Angular 应用程序时，出现以下错误:

ERROR in src/app/new-card-input/new-card-input.component.ts(25,24): error TS2339: Property 'alive' does not exist on type 'NewCardInputComponent'.

这里有什么问题？

这是我的代码:

import { Component, EventEmitter, OnInit, Output, HostListener, ViewChild } from '@angular/core';
import {NgForm, FormBuilder, FormGroup, Validators} from '@angular/forms';
import { takeWhile, debounceTime, filter } from 'rxjs/operators';


@Component({
    selector: 'app-new-card-input',
    templateUrl: './new-card-input.component.html',
    styleUrls: ['./new-card-input.component.scss'],
    host: {'class': 'col-4'}
})
export class NewCardInputComponent implements OnInit {

    newCardForm: FormGroup;
    @ViewChild('form') public form:NgForm;

    constructor(fb:FormBuilder) {
        this.newCardForm = fb.group({
            'text': ['', Validators.compose([Validators.required, Validators.minLength(2)])],
        });

        this.newCardForm.valueChanges.pipe(
        filter((value) => this.newCardForm.valid),
        debounceTime(500),
        takeWhile(() => this.alive)
        ).subscribe(data => {
            console.log(data);
        });
    }

    public newCard:any = {text:''}

    @Output() onCardAdd = new EventEmitter<string>();

    @HostListener('document:keypress', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        if (event.code === "Enter" && this.newCardForm.valid) {
            this.addCard(this.newCardForm.controls['text'].value);
        }
    }

    addCard(text) {
        this.onCardAdd.emit(text);
        this.newCardForm.controls['text'].setValue('');
    }



    ngOnInit() {}

}

有人帮帮我吗？

Answer 1

您需要定义 private alive = true; 这是您正在学习的教程代码的当前步骤。 Getting started with angular 5.

import { Component, EventEmitter, OnInit, Output, HostListener, ViewChild } from '@angular/core';
import {NgForm, FormBuilder, FormGroup, Validators} from '@angular/forms';
import { takeWhile, debounceTime, filter } from 'rxjs/operators';


@Component({
    selector: 'app-new-card-input',
    templateUrl: './new-card-input.component.html',
    styleUrls: ['./new-card-input.component.scss'],
    host: {'class': 'col-4'}
})
export class NewCardInputComponent implements OnInit {

    newCardForm: FormGroup;
    private alive = true;
    @ViewChild('form') public form:NgForm;

    constructor(fb:FormBuilder) {
        this.newCardForm = fb.group({
            'text': ['', Validators.compose([Validators.required, Validators.minLength(2)])],
        });

        this.newCardForm.valueChanges.pipe(
        filter((value) => this.newCardForm.valid),
        debounceTime(500),
        takeWhile(() => this.alive)
        ).subscribe(data => {
            console.log(data);
        });
    }

    public newCard:any = {text:''}

    @Output() onCardAdd = new EventEmitter<string>();

    @HostListener('document:keypress', ['$event'])
    handleKeyboardEvent(event: KeyboardEvent) {
        if (event.code === "Enter" && this.newCardForm.valid) {
            this.addCard(this.newCardForm.controls['text'].value);
        }
    }

    addCard(text) {
        this.onCardAdd.emit(text);
        this.newCardForm.controls['text'].setValue('');
    }



    ngOnInit() {}

}