jeudi 29 septembre 2016

Angular 2 SimpleChanges Object throws error at first npm start

In my angular 2 application there is a component containing an array of objects that is passing the chosen (clicked) one to it's direct child component. This does display the data more detailed. I'm using the "SimpleChanges" feature to watch in this child component if the object given changed to make another http request to get the related comments from a database.

If I try to build it with npm I get an error, saying :

app/displayEntry.component.ts(23,41): error TS2339: Property 'entry' does not exist on type 'SimpleChanges'

If I just comment this part out, start npm and finally put it in there again and save it, there is no Problem anymore ( no erro and it works ). My question is, is there a way to work around this behavior and can this cause any trouble later I don't foresee or should I just ignore it? Thanks for your help

Parent component:

import { Component, OnInit } from '@angular/core';
import { entry } from './Objekte/entry';
import { entryService } from './entry.service'

@Component({
templateUrl: 'app/Html_Templates/displayLastEntrys.template.html'
})

export class displayLastEntrys implements OnInit{

public entrys : entry[];
private entryChoosen: boolean;
private ChoosenEntry : entry; 

constructor ( private entryservice : entryService){
    this.entryChoosen = false;
}

ngOnInit() : void  {
    this.getData();
}

getData() {
    this.entryservice.getFirstEntrys().then(entrys => this.entrys = entrys);
}

entryClicked(ent: entry){
    this.entryChoosen = true;
    this.ChoosenEntry = ent; 
}

leaveEntry () {
    this.entryChoosen = false; 
}

voted( upordown : boolean ) {

}
}

Child component:

import { Component, Input, Injectable, OnChanges , SimpleChanges, Output,                    EventEmitter} from '@angular/core';
import { entry} from './Objekte/entry';
import { entryService } from './entry.service';
import { comment } from './Objekte/comments'; 

@Component({
selector: 'display-entry',
templateUrl: 'app/Html_Templates/displayEntry.template.html'
})

export class displayComponent implements OnChanges{
@Input() public entry : entry;
public comments : comment[];

private changecounter : number;

constructor(private service : entryService) {
    this.changecounter  = 0;
}

ngOnChanges(changes : SimpleChanges){

   this.service.getComments(changes.entry.currentValue.id)
            .then(com => this.comments = com )
            .catch();

    this.entry.viewed++;
    // To implement :: change database 
}

votedUp () : void {
    this.entry.votes ++;
    // To implement :: change database 
}

votedDown () : void  {
    this.entry.votes --;
    // To implement :: change database
}
}




Aucun commentaire:

Enregistrer un commentaire