なぜangular4コンポーネントの変数は破棄されますか

Question

ページングコンポーネントを作成しています。これはコードです：

import {Component,OnInit,Input,Output,EventEmitter,OnChanges} from '@angular/core' 

@Component({ 
    selector:"pagination", 
    templateUrl:"pagination.component.html" 
}) 
export class Pagination implements OnChanges{ 

    @Input() 
    numOfPages:number; 

    @Output() 
    onPageClicked:EventEmitter<number>=new EventEmitter<number>(); 

    pages:number[]; 

    constructor(){ 
     var a=<any>Array(this.numOfPages).keys(); 
     this.pages= a; 
    } 
    ngOnChanges(){ 
     debugger; 
     var a=<any>Array(this.numOfPages).keys(); 
     this.pages= a; 
    } 
    onSomePageClicked(page){ 

      this.onPageClicked.emit(page); 
    } 

} 

すべてがうまくいきます。ページをクリックするとイベントも発生します。しかし何らかの理由でイベントが発生した場合、this.pages変数は空の配列です。

<pagination [numOfPages]="7" (onPageClicked)="onPageItemClicked($event)"></pagination> 

Answer 1

あなたはanyを使って、足で自分自身を撮影し、活字体のエラーを無視している：私はこのように、このコンポーネントを呼び出すためbegginingでは7つの要素の配列です。

あなたがライン

var a = Array(this.numOfPages).keys(); 
this.pages= a; 

をコンパイルしようとする場合は、「初期化型IterableIterator []は、可変タイプ番号に割り当て可能ではありません」というエラーを取得します。

したがって、TypeScriptは、あなたが何か間違っていると伝え、それは<any>を追加することによって間違っていると思います。合ってます。 Array(this.numOfPages).keys()は配列を返しません。だから、コードを修正して、実際の配列を作成してください。

private pageArray(size: number): Array<number> { 
    const result = []; 
    for (let i = 0; i < size; i++) { 
    result.push(i + 1); 
    } 
    return result; 
} 

デモ：http://plnkr.co/edit/9G5ReCWGmF6jywMnB5nW?p=preview