選択変更のデータをリロードする - 角度4

Question

私は選択オプションを変更するときに私のツリーテーブルをリロードしようとしています。私はOnInitメソッドをリロードしようとしましたが、動作しません。 これは私のコンポーネントです。サービス_estadoServiceは、Webサービスを呼び出す関数を呼び出します。

constructor(
     private _route: ActivatedRoute, 
     private _router: Router, 
     private _estadoService: EstadoService 
) { 
    this.titulo = 'Estado de Ingresos y Gastos:'; 
    this.year = 2017; 
    } 

    ngOnInit() { 
    let TodayDate = new Date(); 
    this.mes = TodayDate.getMonth(); 
    this.listaAnios = this.getYears(); 
    this.listaMonths = this.getMonths(); 
    this.listaMonthsNames = this.getMonthsNames(); 

    for (var i = 0; i < this.listaMonths.length; i++) { 
     this.finalarr[i] = [this.listaMonths[i],this.listaMonthsNames[i]]; 
    } 

    let sess = localStorage.getItem('datos'); 
    let datos = sess.split(" "); 

    this._estadoService.getEstado(datos[1],this.year).subscribe(
     result => { console.log(result); 
     this.children = result.Costos.ItemCosto; 
     this.estados = this.getNewData(this.children); 
     this.estados = this.getFirstLevel(this.estados, '0'); 
     this.list_Init = result.Costos.ItemCosto; 
     this.obj = this.createTree(null, this.children); 
     this.datos= this.obj[0]; 
     }, 
     error => { 
     console.log(<any>error); 
     } 
    ); 
    } 

onChange(value) { 
    console.log(value); 
    this.year = value; 
    ngOnInit(); 
} 

これは私のHTML

<div class="form-group"> 
    <select class="form-control" name="anio"(change)="onChange($event.target.value)"> 
     <option *ngFor="let list of listaAnios" [ngValue]="list">{{list}}</option> 
    </select> 
</div> 
<div class="form-group"> 
    <label class="col-sm-3 control-label" for="allMonths">Ver todos los meses:</label> 
    <div class="col-sm-4"> 
    <input type="checkbox" name="allMonths" id="allMonths" [ngModel]="" (ngModelChange)="showAll($event)"> 
    </div> 
</div> 
<div class="clearfix"></div> 
<div *ngIf="!estados"> 
    Cargando Listado de Pagos... 
</div> 
<div *ngIf="estados" class="table-responsive col-lg-12 tablilla"> 
    <div> 
    <ay-treeTable [value]="datos.data"> 
     <ay-column field="nom_item" header="Ingresos y Gastos"></ay-column> 
     <ng-container *ngFor="let month of finalarr | slice: this.listaMonthsNames.length - this.check"> 
     <ay-column field="{{month[0]}}" header="{{month[1]}}"> {{month[0]}} </ay-column> 
     </ng-container> 

    </ay-treeTable> 
    </div> 
</div> 

ID、私は選択のオプションを変更したときに、私のツリーテーブルをリフレッシュしたいです。どのようにこれを達成するための任意のアイデアですか？

Answer 1

コンポーネントの他のメソッドから、ngOnInitライフサイクルメソッドを決して呼び出さないでください。選択のオプションが変更されたときに何をしたいが再びすべてのロジックを実行することであるならば、あなたは次の手順を実行できます。

constructor(
    private _route: ActivatedRoute, 
    private _router: Router, 
    private _estadoService: EstadoService 
) { 
    this.titulo = 'Estado de Ingresos y Gastos:'; 
    this.year = 2017; 
} 

ngOnInit() { 
    updateData(); 
} 

updateData() { 
    let TodayDate = new Date(); 
    this.mes = TodayDate.getMonth(); 
    this.listaAnios = this.getYears(); 
    this.listaMonths = this.getMonths(); 
    this.listaMonthsNames = this.getMonthsNames(); 

    for (var i = 0; i < this.listaMonths.length; i++) { 
    this.finalarr[i] = [this.listaMonths[i],this.listaMonthsNames[i]]; 
    } 

    let sess = localStorage.getItem('datos'); 
    let datos = sess.split(" "); 

    this._estadoService.getEstado(datos[1],this.year).subscribe(
    result => { console.log(result); 
     this.children = result.Costos.ItemCosto; 
     this.estados = this.getNewData(this.children); 
     this.estados = this.getFirstLevel(this.estados, '0'); 
     this.list_Init = result.Costos.ItemCosto; 
     this.obj = this.createTree(null, this.children); 
     this.datos= this.obj[0]; 
    }, 
    error => { 
     console.log(<any>error); 
    } 
); 
} 

onChange(value) { 
    console.log(value); 
    this.year = value; 
    updateData(); 
}